Checking For Integer

Beeeeney · November 28, 2012

I kinda need some help with a form. I need some Javascript to check if something submitted is an integer. I've googled it but the results I got looked unnecessarily complex.

Here's some code 'n stuff.

<script type="text/javascript">

function validatePage() {
   var msg="";

   if (document.forms.CustomerInformation.Title.value == "Please Choose") {
   msg += "* Please provide a Title\n";
   } else {
       msg += "";
   }
   if (document.forms.CustomerInformation.Firstname.value == "") {
   msg += "* Please provide a First Name\n";
   }
   if (document.forms.CustomerInformation.Lastname.value == "") {
   msg += "* Please provide a Surname\n";
   }    
   if (document.forms.CustomerInformation.Nationality.value == "") {
   msg += "* Please provide a Nationality\n";
   }	    
   if (document.forms.CustomerInformation.Issuecountry.value == "") {
   msg += "* Please provide a Country of Issue\n";
   }
   if (document.forms.CustomerInformation.Fullname.value == "") {
   msg += "* Please provide a Full name for your next of kin\n";
   }    
   if (document.forms.CustomerInformation.Address.value == "") {
   msg += "* Please provide an Address for your next of kin\n";
   }
   if (document.forms.CustomerInformation.Postcode.value == "") {
   msg += "* Please provide a Postcode for your next of kin\n";
   }    
   if (document.forms.CustomerInformation.Relationship.value == "") {
   msg += "* Please give details of your Relationship to your next of kin\n";
   }    
   if (document.forms.CustomerInformation.Mobilenumber.value == "") {
   msg += "* Please provide a Mobile Number for your next of kin\n";
   }    
   if (document.forms.CustomerInformation.checkbox.checked == false) {
   msg += "\n* Please read and agree to the Terms and Conditions\n";
   }

   if (msg == "") {
   return true;            
   } else {
   alert("This form cannot be submitted. Please correct the following issue(s):\n\n"+ msg);
   return false;
   }
   }


</script>

I want to test the "Mobilenumber" value for an integer. Any help would be appreciated.

haku · November 28, 2012

if (document.forms.CustomerInformation.Mobilenumber.match(/\D/)) {
       // A non-numeric character was entered
}

Beeeeney · November 28, 2012

if (document.forms.CustomerInformation.Mobilenumber.match(/\D/)) {
// A non-numeric character was entered
}

I tried that, and now the form just skips validation altogether and just submits to my database.

mrMarcus · November 28, 2012

function is_numeric(a) {
   var e = /^[0-9]+$/;
   if ((a.value.match(e)) {
       return true;
   }
   return false;
}

Edited November 28, 2012 by mrMarcus

Beeeeney · November 28, 2012

I see how that would work, but I do not see how I could integrate that into my code. I rarely use Javascript and although this is basic stuff, I have no idea how to integrate it.

mrMarcus · November 28, 2012

Something like:

function is_numeric(a) {
   var e = /^[0-9]+$/;
   if (a.match(e)) {
       return true;
   }
   return false;
}

function validatePage() {
   ...

   var mobile = document.forms.CustomerInformation.Mobilenumber.value;
   if ((mobile == "") || !is_numeric(mobile)) {
       msg += "* Please provide a Mobile Number for your next of kin\n";
   }

   ...
}

EDIT: Had typo in code. Updated code block.

Edited November 28, 2012 by mrMarcus

Beeeeney · November 28, 2012

Anything I add to my validatePage() function just makes it completely skip all validation. I just tried your code and while I am sure that it would work, it completely ruins my whole validation. Any ideas as to why?

mrMarcus · November 28, 2012

For development, remove the form submit() action and only have your script fire the validatePage() function. Do you have Firefox Web Developer or Firebug running? Makes for easy debugging.

Can you post your form? I will try try and replicate your issue locally.

EDIT: Also, please post your latest validatePage() function code.

Edited November 28, 2012 by mrMarcus

Beeeeney · November 28, 2012

The whole page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<?php include("includeDOB.php"); ?>
<title>Form</title>
<link type="text/css" rel="stylesheet" href="style2.css">
</head>
<body>



<script type="text/javascript">


function validatePage() {
var msg="";

if (document.forms.CustomerInformation.Title.value == "Please Choose") {
msg += "* Please provide a Title\n";
} else {
msg += "";
}
if (document.forms.CustomerInformation.Firstname.value == "") {
msg += "* Please provide a First Name\n";
}
if (document.forms.CustomerInformation.Lastname.value == "") {
msg += "* Please provide a Surname\n";
}
if (document.forms.CustomerInformation.Nationality.value == "") {
msg += "* Please provide a Nationality\n";
}	
if (document.forms.CustomerInformation.Issuecountry.value == "") {
msg += "* Please provide a Country of Issue\n";
}
if (document.forms.CustomerInformation.Fullname.value == "") {
msg += "* Please provide a Full name for your next of kin\n";
}
if (document.forms.CustomerInformation.Address.value == "") {
msg += "* Please provide an Address for your next of kin\n";
}
if (document.forms.CustomerInformation.Postcode.value == "") {
msg += "* Please provide a Postcode for your next of kin\n";
}
if (document.forms.CustomerInformation.Relationship.value == "") {
msg += "* Please give details of your Relationship to your next of kin\n";
}
if (document.forms.CustomerInformation.Mobilenumber.value == "") {
msg += "* Please provide a Mobile Number for your next of kin\n";
}
if (document.forms.CustomerInformation.checkbox.checked == false) {
msg += "\n* Please read and agree to the Terms and Conditions\n";
}

if (msg == "") {
return true;
} else {
alert("This form cannot be submitted. Please correct the following issue(s):\n\n"+ msg);
return false;
}
}


</script>

<img class="pclogo" src="http://planetcruise.co.uk/images/header/nav/logo3_Rev%20A.jpg">


<form action="submit.php" method="post" name="CustomerInformation" onsubmit="return validatePage()">
<br><br><br>
<span class="span1">Booking Reference: <input type="text" name="Bookingreference"></span><br><br><br><br>


<div class="rightstuff"> <br><br><br><br> <select name="Title"><option selected>Please Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Ms</option>
<option value="Dr">Dr</option>
</select>
<br>




<input type="text" name="Firstname"><br>
<input type="text" name="Middlename"><br>
<input type="text" name="Lastname"><br>						
<?php echo $form1; ?> <!--$form1 can be found in "includeDOB.php" --><br><br>





<br><br><br><input type="text" name="PassportNo"><br>
<?php echo $form2; ?><br> <!--$form2 can be found in "includeDOB.php" -->
<?php echo $form3; ?><br> <!--$form3 can be found in "includeDOB.php" -->
<input type="text" name="Nationality"><br>
<input type="text" name="Issuecountry"><br><br>




<!-- NEXT OF KIN INFO v -->

<br><br><input type="text" name="Fullname"><br>
<input type="text" name="Address"><br>
<input type="text" name="Postcode"><br>
<input type="text" name="Relationship"><br>
<input type="text" name="Mobilenumber"><br>
<input type="text" name="Daytimephone"><br>
<input type="text" name="Eveningphone"><br>
<input type="text" name="Email"><br><br>




<!--TRAVEL INSURANCE DETAILS-->

<br><br><br><input type="text" name="Company"><br>
<input type="text" name="Policynumber"><br>
<input type="text" name="Underwriter"><br>
<input type="text" name="Emergencynumber"><br><br><br></div>

<div class="leftstuff"><h1>Personal Information</h1><br>
<!--PERSONAL INFORMATION -->


Title:*<br>First Name:*<br>Middle Name:<br>Last Name:*<br>Last Name:*<br>Date of Birth:*<br><br><h1>Passport Details</h1><br>Passport Number:*<br>Date of Issue:*<br>Date of Expiry:*<br>Nationality:*<br>Issue Country:*<br><br><h1>Next of Kin Information</h1><br>Full Name:*<br>Address:*<br>Postcode:*<br>Relationship:*<br>Mobile Number:*<br>Daytime Phone:<br>Evening Phone:<br>Email Address:<br><br><h1>Travel Insurance Details</h1><br>Insurance Company:<br>Policy Number:<br>Medical Company Name:<br>Emergency Medical Contact Number:<br><br><br><span class="bottomtext">I have read and agree to the <a target="_blank" href="http://planetcruise.co.uk/about-planet-cruise/terms">terms and conditions</a></span> <input type="checkbox" name="checkbox"><br><br><input type="submit" value="Submit"><br><br></div>






</form>
</body>
</html>

includeDOB.php

<?php
$form1 = "<select name=\"day1\">\n";
$day1=1;
while($day1<32) {
$form1 .= "<option value=\"{$day1}\">{$day1}</option> ";
$day1++;
}
$form1 .= "</select>\n \n <select name=\"month1\">\n";
$month1 = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novermber", "December");
foreach ($month1 as $key) {
$form1 .= "<option value=\"{$key}\">{$key}</option>\n ";
}
$form1 .= "</select>\n \n <select name=\"year1\">\n";
$year1=1901;
while($year1<2012 && $year1 > 1900) {
$form1 .= "<option value=\"{$year1}\">{$year1}</option>\n ";
$year1++;
}
$form1 .= "</select> \n";
?>

<?php
$form2 = "<select name=\"day2\">\n";
$day2=1;
while($day2<32) {
$form2 .= "<option value=\"{$day2}\">{$day2}</option> ";
$day2++;
}
$form2 .= "</select>\n \n <select name=\"month2\">\n";
$month2 = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novermber", "December");
foreach ($month2 as $key) {
$form2 .= "<option value=\"{$key}\">{$key}</option>\n ";
}
$form2 .= "</select>\n \n <select name=\"year2\">\n";
$year2=1901;
while($year2<2012 && $year2 > 1900) {
$form2 .= "<option value=\"{$year2}\">{$year2}</option>\n ";
$year2++;
}
$form2 .= "</select> \n";
?>

<?php
$form3 = "<select name=\"day3\">\n";
$day3=1;
while($day3<32) {
$form3 .= "<option value=\"{$day3}\">{$day3}</option> ";
$day3++;
}
$form3 .= "</select>\n \n <select name=\"month3\">\n";
$month3 = array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "Novermber", "December");
foreach ($month3 as $key) {
$form3 .= "<option value=\"{$key}\">{$key}</option>\n ";
}
$form3 .= "</select>\n \n <select name=\"year3\">\n";
$year3=1901;
while($year3<2012 && $year3 > 1900) {
$form3 .= "<option value=\"{$year3}\">{$year3}</option>\n ";
$year3++;
}
$form3 .= "</select> \n";
?>

Edited November 28, 2012 by Beeeeney

mrMarcus · November 28, 2012

I had no issues with it.

This is the JS block I used (cut out all the fluff as I didn't feel like filling out your form):

function is_numeric(a) {
var e = /^[0-9]+$/;
if (a.match(e)) {
return true;
}
return false;
}
function validatePage() {
   var msg="";

   var mobile = document.forms.CustomerInformation.Mobilenumber.value;
   if ((mobile == '') || !is_numeric(mobile)) {
       msg += "* Please provide a Mobile Number for your next of kin\n";
   }

   if (msg == "") {
       return true;
   } else {
       alert("This form cannot be submitted. Please correct the following issue(s):\n\n"+ msg);
       return false;
   }
}

Upon submitting your form it would die (stop) if I did not enter a numeric value for mobile, but would continue through (process) if I did.

Beeeeney · November 28, 2012

I even tested it with your updated code and for some reason it is still completely skipping validation.

<script type="text/javascript">


function is_numeric(a) {
var e = /^[0-9]+$/;
if (a.match(e)) {
return true;
}
return false;
}

var mobile = document.forms.CustomerInformation.Mobilenumber.value;

function validatePage() {
   var msg="";

   if (document.forms.CustomerInformation.Title.value == "Please Choose") {
   msg += "* Please provide a Title\n";
   } else {
       msg += "";
   }
   if (document.forms.CustomerInformation.Firstname.value == "") {
   msg += "* Please provide a First Name\n";
   }
   if (document.forms.CustomerInformation.Lastname.value == "") {
   msg += "* Please provide a Surname\n";
   }    
   if (document.forms.CustomerInformation.Nationality.value == "") {
   msg += "* Please provide a Nationality\n";
   }	    
   if (document.forms.CustomerInformation.Issuecountry.value == "") {
   msg += "* Please provide a Country of Issue\n";
   }
   if (document.forms.CustomerInformation.Fullname.value == "") {
   msg += "* Please provide a Full name for your next of kin\n";
   }    
   if (document.forms.CustomerInformation.Address.value == "") {
   msg += "* Please provide an Address for your next of kin\n";
   }
   if (document.forms.CustomerInformation.Postcode.value == "") {
   msg += "* Please provide a Postcode for your next of kin\n";
   }    
   if (document.forms.CustomerInformation.Relationship.value == "") {
   msg += "* Please give details of your Relationship to your next of kin\n";
   }    
   if ((mobile == "") || !is_numeric(mobile)) {
    msg += "* Please provide a Mobile Number for your next of kin\n";
    }
   if (document.forms.CustomerInformation.checkbox.checked == false) {
   msg += "\n* Please read and agree to the Terms and Conditions\n";
   }

   if (msg == "") {
   return true;            
   } else {
   alert("This form cannot be submitted. Please correct the following issue(s):\n\n"+ msg);
   return false;
   }
   }


</script>

mrMarcus · November 28, 2012

Honestly, I cannot replicate your issue. Works just fine on my end.

You're testing multiple ways, correct? E.g. submitting form completely empty, adding alpha characters to the mobile input, etc.

haku · November 29, 2012

The code I provided here:

if (document.forms.CustomerInformation.Mobilenumber.match(/\D/)) {
// A non-numeric character was entered
}

Does the exact same thing shown in the function is_numeric() shown here, but with less overhead.:

function is_numeric(a) {
var e = /^[0-9]+$/;
if ((a.value.match(e)) {
return true;
}
return false;
}

They are both using regex to test if the given value is entirely numeric or not.

I tried that, and now the form just skips validation altogether and just submits to my database.

Two points:

1) You probably have an error somewhere else in your javascript. If you turn on a javascript debugging console, you will be able to see any errors that pop-up.

2) You should not rely entirely on javascript validation to ensure your code is not submitted to the database, as some users will have javascript turned on. Javascript should be used as an addition to server-side validation, not in place of it.

Edited November 29, 2012 by haku

Beeeeney · December 5, 2012

I do have an error, apparently:

Uncaught TypeError: Cannot read property 'Mobilenumber' of undefined

No reason for this error to be here.

haku · December 6, 2012

There is most definitely a reason, or you would not be seeing it! The question is what is causing that error.

In your code, the only place you are using Mobilenumber is here:

if (document.forms.CustomerInformation.Mobilenumber.value == "") {

The error is saying that document.forms.CustomerInformation is undefined. This is strange seeing as you would see this error much earlier than this spot, since you are using document.forms.CustomerInformation in plenty of the code before that. This leads me to think that maybe you aren't showing us the actual code you are using, is that correct? If so, can you please post your current/actual code?

Beeeeney · December 6, 2012

I showed you the actual code I was using, but I'll fire up my editor and show you the exact code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<?php include("includeDOB.php"); ?>
<title>Form</title>
<link type="text/css" rel="stylesheet" href="style2.css">
</head>
<body>



<script type="text/javascript">


function is_numeric(a) {
var e = /^[0-9]+$/;
if (a.match(e)) {
return true;
}
return false;
}

var mobile = document.forms.CustomerInformation.Mobilenumber.value;

function validatePage() {
var msg="";

if (document.forms.CustomerInformation.Title.value == "Please Choose") {
msg += "* Please provide a Title\n";
} else {
msg += "";
}
if (document.forms.CustomerInformation.Firstname.value == "") {
msg += "* Please provide a First Name\n";
}
if (document.forms.CustomerInformation.Lastname.value == "") {
msg += "* Please provide a Surname\n";
}
if (document.forms.CustomerInformation.Nationality.value == "") {
msg += "* Please provide a Nationality\n";
}	
if (document.forms.CustomerInformation.Issuecountry.value == "") {
msg += "* Please provide a Country of Issue\n";
}
if (document.forms.CustomerInformation.Fullname.value == "") {
msg += "* Please provide a Full name for your next of kin\n";
}
if (document.forms.CustomerInformation.Address.value == "") {
msg += "* Please provide an Address for your next of kin\n";
}
if (document.forms.CustomerInformation.Postcode.value == "") {
msg += "* Please provide a Postcode for your next of kin\n";
}
if (document.forms.CustomerInformation.Relationship.value == "") {
msg += "* Please give details of your Relationship to your next of kin\n";
}
if ((mobile == "") || !is_numeric(mobile)) {
msg += "* Please provide a Mobile Number for your next of kin\n";
}
if (document.forms.CustomerInformation.checkbox.checked == false) {
msg += "\n* Please read and agree to the Terms and Conditions\n";
}

if (msg == "") {
return true;
} else {
alert("This form cannot be submitted. Please correct the following issue(s):\n\n"+ msg);
return false;
}
}


</script>

<img class="pclogo" src="http://planetcruise.co.uk/images/header/nav/logo3_Rev%20A.jpg">


<form action="submit.php" method="post" name="CustomerInformation" onsubmit="return validatePage()">
<br><br><br>
<span class="span1">Booking Reference: <input type="text" name="Bookingreference"></span><br><br><br><br>


<div class="rightstuff"> <br><br><br><br> <select name="Title"><option selected>Please Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Ms</option>
<option value="Dr">Dr</option>
</select>
<br>




<input type="text" name="Firstname"><br>
<input type="text" name="Middlename"><br>
<input type="text" name="Lastname"><br>						
<?php echo $form1; ?> <!--$form1 can be found in "includeDOB.php" --><br><br>





<br><br><br><input type="text" name="PassportNo"><br>
<?php echo $form2; ?><br> <!--$form2 can be found in "includeDOB.php" -->
<?php echo $form3; ?><br> <!--$form3 can be found in "includeDOB.php" -->
<input type="text" name="Nationality"><br>
<input type="text" name="Issuecountry"><br><br>




<!-- NEXT OF KIN INFO v -->

<br><br><input type="text" name="Fullname"><br>
<input type="text" name="Address"><br>
<input type="text" name="Postcode"><br>
<input type="text" name="Relationship"><br>
<input type="text" name="Mobilenumber"><br>
<input type="text" name="Daytimephone"><br>
<input type="text" name="Eveningphone"><br>
<input type="text" name="Email"><br><br>




<!--TRAVEL INSURANCE DETAILS-->

<br><br><br><input type="text" name="Company"><br>
<input type="text" name="Policynumber"><br>
<input type="text" name="Underwriter"><br>
<input type="text" name="Emergencynumber"><br><br><br></div>

<div class="leftstuff"><h1>Personal Information</h1><br>
<!--PERSONAL INFORMATION -->


Title:*<br>First Name:*<br>Middle Name:<br>Last Name:*<br>Last Name:*<br>Date of Birth:*<br><br><h1>Passport Details</h1><br>Passport Number:*<br>Date of Issue:*<br>Date of Expiry:*<br>Nationality:*<br>Issue Country:*<br><br><h1>Next of Kin Information</h1><br>Full Name:*<br>Address:*<br>Postcode:*<br>Relationship:*<br>Mobile Number:*<br>Daytime Phone:<br>Evening Phone:<br>Email Address:<br><br><h1>Travel Insurance Details</h1><br>Insurance Company:<br>Policy Number:<br>Medical Company Name:<br>Emergency Medical Contact Number:<br><br><br><span class="bottomtext">I have read and agree to the <a target="_blank" href="http://planetcruise.co.uk/about-planet-cruise/terms">terms and conditions</a></span> <input type="checkbox" name="checkbox"><br><br><input type="submit" value="Submit"><br><br></div>






</form>
</body>
</html>

Edited December 6, 2012 by Beeeeney

kicken · December 6, 2012

var mobile = document.forms.CustomerInformation.Mobilenumber.value;

function validatePage() {

That variable definition needs to be inside your validatePage function. By placing it outside, you are attempting to get that field's value as the page loads, which due to the placement of the script, happens before the field or the form exists yet. Even if it did work, it would only get the value of the field when the page loaded (ie, blank), not the value after someone entered their data.

Beeeeney · December 6, 2012

It works now! Thanks a lot.

Edited December 6, 2012 by Beeeeney

Sign In

Checking For Integer

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information