Javascript Field Validations -- Client Side Scripting
By Nannette Thacker - 08/19/1999
By Nannette Thacker - 08/19/1999
This page is designed as a reference where you can snag source code for both the HTML form elements and the Javascript field validations.
How to use this form: Press the Submit button without filling out the form. It will bring up the first error message. Correct the field pertaining to the first error message, then press the Submit button again for the next error message. Work your way through the form to see how the validations work. There are several Submit buttons on the page to spare you from having to scroll up and down.
Below is the source code:
<script Language="JavaScript">
<!--
function Form1_Validator(theForm)
{
var alertsay = ""; // define for long lines
// alertsay is not necessary for your code,
// but I need to break my lines in multiple lines
// so the code won't extend off the edge of the page
// check to see if the field is blank
if (theForm.Alias.value == "")
{
alert("You must enter an alias.");
theForm.Alias.focus();
return (false);
}
// require at least 3 characters be entered
if (theForm.Alias.value.length < 3)
{
alert("Please enter at least 3 characters in the \"Alias\" field.");
theForm.Alias.focus();
return (false);
}
// allow ONLY alphanumeric keys, no symbols or punctuation
// this can be altered for any "checkOK" string you desire
var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var checkStr = theForm.Alias.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Please enter only letter and numeric characters in the \"Alias\" field.");
theForm.Alias.focus();
return (false);
}
// require at least 5 characters in the password field
if (theForm.Password.value.length < 5)
{
alert("Please enter at least 5 characters in the \"Password\" field.");
theForm.Password.focus();
return (false);
}
// check if both password fields are the same
if (theForm.Password.value != theForm.Password2.value)
{
alert("The two passwords are not the same.");
theForm.Password2.focus();
return (false);
}
// allow only 150 characters maximum in the comment field
if (theForm.comment.value.length > 150)
{
alert("Please enter at most 150 characters in the comment field.");
theForm.comment.focus();
return (false);
}
// check if no drop down has been selected
if (theForm.sex.selectedIndex < 0)
{
alert("Please select one of the \"Gender\" options.");
theForm.sex.focus();
return (false);
}
// check if the first drop down is selected, if so, invalid selection
if (theForm.sex.selectedIndex == 0)
{
alert("The first \"Gender\" option is not a valid selection.");
theForm.sex.focus();
return (false);
}
// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_month.selectedIndex <= 0)
{
alert("Please select a month.");
theForm.date_month.focus();
return (false);
}
// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_day.selectedIndex <= 0)
{
alert("Please select a day.");
theForm.date_day.focus();
return (false);
}
// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_year.selectedIndex <= 0)
{
alert("Please select a year.");
theForm.date_year.focus();
return (false);
}
// check if email field is blank
if (theForm.Email.value == "")
{
alert("Please enter a value for the \"Email\" field.");
theForm.Email.focus();
return (false);
}
// test if valid email address, must have @ and .
var checkEmail = "@.";
var checkStr = theForm.Email.value;
var EmailValid = false;
var EmailAt = false;
var EmailPeriod = false;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkEmail.length; j++)
{
if (ch == checkEmail.charAt(j) && ch == "@")
EmailAt = true;
if (ch == checkEmail.charAt(j) && ch == ".")
EmailPeriod = true;
if (EmailAt && EmailPeriod)
break;
if (j == checkEmail.length)
break;
}
// if both the @ and . were in the string
if (EmailAt && EmailPeriod)
{
EmailValid = true
break;
}
}
if (!EmailValid)
{
alert("The \"email\" field must contain an \"@\" and a \".\".");
theForm.Email.focus();
return (false);
}
// check if numbers field is blank
if (theForm.numbers.value == "")
{
alert("Please enter a value for the \"numbers\" field.");
theForm.numbers.focus();
return (false);
}
// only allow numbers to be entered
var checkOK = "0123456789";
var checkStr = theForm.numbers.value;
var allValid = true;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Please enter only digit characters in the \"numbers\" field.");
theForm.numbers.focus();
return (false);
}
// require at least one radio button be selected
var radioSelected = false;
for (i = 0; i < theForm.fruit.length; i++)
{
if (theForm.fruit[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Please select one of the \"Fruit\" options.");
return (false);
}
// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.rangefrom.selectedIndex <= 0)
{
alert("Please select a valid number in the range \"From\" field.");
theForm.rangefrom.focus();
return (false);
}
// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.rangeto.selectedIndex <= 0)
{
alert("Please select a valid number in the range \"To\" field.");
theForm.rangeto.focus();
return (false);
}
// require that the To Field be greater than or equal to the From Field
var chkVal = theForm.rangeto.value;
var chkVal2 = theForm.rangefrom.value;
if (chkVal != "" && !(chkVal >= chkVal2))
{
alert("The \"To\" value must be greater than or equal to (>=) the \"From\" value.");
theForm.rangeto.focus();
return (false);
}
// check if more than 5 options are selected
// check if less than 1 options are selected
var numSelected = 0;
var i;
for (i = 0; i < theForm.province.length; i++)
{
if (theForm.province.options[i].selected)
numSelected++;
}
if (numSelected > 5)
{
alert("Please select at most 5 of the \"province\" options.");
theForm.province.focus();
return (false);
}
if (numSelected < 1)
{
alert("Please select at least 1 of the \"province\" options.");
theForm.province.focus();
return (false);
}
// require a value be entered in the field
if (theForm.NumberText.value == "")
{
alert("Please enter a value for the \"NumberText\" field.");
theForm.NumberText.focus();
return (false);
}
// require that at least one character be entered
if (theForm.NumberText.value.length < 1)
{
alert("Please enter at least 1 characters in the \"NumberText\" field.");
theForm.NumberText.focus();
return (false);
}
// don't allow more than 5 characters be entered
if (theForm.NumberText.value.length > 5)
{
alertsay = "Please enter at most 5 characters in "
alertsay = alertsay + "the \"NumberText\" field, including comma."
alert(alertsay);
theForm.NumberText.focus();
return (false);
}
// only allow 0-9, hyphen and comma be entered
var checkOK = "0123456789-,";
var checkStr = theForm.NumberText.value;
var allValid = true;
var decPoints = 0;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Please enter only digit characters in the \"NumberText\" field.");
theForm.NumberText.focus();
return (false);
}
// require a minimum of 9 and a maximum of 5000
// allow 5,000 (with comma)
var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= "9" && prsVal <= "5000"))
{
alertsay = "Please enter a value greater than or "
alertsay = alertsay + "equal to \"9\" and less than or "
alertsay = alertsay + "equal to \"5000\" in the \"NumberText\" field."
alert(alertsay);
theForm.NumberText.focus();
return (false);
}
// alert if the box is NOT checked
if (!theForm.checkbox1.checked)
{
alertsay = "Just reminding you that if you wish "
alertsay = alertsay + "to have our Super Duper option, "
alertsay = alertsay + "you must check the box!"
alert(alertsay);
}
// require that at least one checkbox be checked
var checkSelected = false;
for (i = 0; i < theForm.checkbox2.length; i++)
{
if (theForm.checkbox2[i].checked)
checkSelected = true;
}
if (!checkSelected)
{
alert("Please select at least one of the \"Test Checkbox\" options.");
return (false);
}
// only allow up to 2 checkboxes be checked
var checkCounter = 0;
for (i = 0; i < theForm.checkbox2.length; i++)
{
if (theForm.checkbox2[i].checked)
checkCounter = checkCounter + 1;
}
if (checkCounter > 2)
{
alert("Please select only one or two of the \"Test Checkbox\" options.");
return (false);
}
// because this is a sample page, don't allow to exit to the post action
// comes in handy when you are testing the form validations and don't
// wish to exit the page
alertsay = "All Validations have succeeded. "
alertsay = alertsay + "This is just a test page. There is no submission page."
alert(alertsay);
return (false);
// replace the above with return(true); if you have a valid form to submit to
}
//--></script>
<form action="javascript.asp?ID=<%=siteID%>"
method="POST" onsubmit="return Form1_Validator(this)" name="Form1">
<input type="submit" name="Submit" value="Submit"><p>
Alias:
<input type="text" size="15" maxlength="15" name="Alias"><br>
3 checks:
Not blank, at least 3 characters, only alphanumeric characters allowed.<p>
Password:
<input type="password" size="10" maxlength="10" name="Password">
Verify Password:
<input type="password" size="10" maxlength="10" name="Password2"><br>
2 checks: Require at least 5 characters in the first password field.
Check if both password field values are the same.<p>
Comment: (Please enter 150 characters maximum.)<br>
<textarea name="comment" rows="4" cols="50" wrap="virtual">
</textarea><br>
Gender:
<select name="sex" size="1">
<option>Select a Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
2 checks: Check that at least one drop down has been selected.
The first drop down is an invalid selection.<p>
Date Month:
<select NAME="date_month">
<option VALUE="0">
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
<option VALUE="10">10
<option VALUE="11">11
<option VALUE="12">12
</select>
Day:
<select NAME="date_day">
<option VALUE="0">
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
<option VALUE="10">10
<option VALUE="11">11
<option VALUE="12">12
<option VALUE="13">13
<option VALUE="14">14
<option VALUE="15">15
<option VALUE="16">16
<option VALUE="17">17
<option VALUE="18">18
<option VALUE="19">19
<option VALUE="20">20
<option VALUE="21">21
<option VALUE="22">22
<option VALUE="23">23
<option VALUE="24">24
<option VALUE="25">25
<option VALUE="26">26
<option VALUE="27">27
<option VALUE="28">28
<option VALUE="29">29
<option VALUE="30">30
<option VALUE="31">31
</select>
Year:
<select NAME="date_year">
<option VALUE="0">
<option VALUE="2000">2000
<option VALUE="1999">1999
<option VALUE="1998">1998
<option VALUE="1997">1997
<option VALUE="1996">1996
<option VALUE="1995">1995
<option VALUE="1994">1994
<option VALUE="1993">1993
<option VALUE="1992">1992
<option VALUE="1991">1991
<option VALUE="1990">1990
</select>
<br>
2 checks: Check that at least one drop down has been selected.
The first drop down is an invalid selection.<p>
Email:
<input type="text" size="60" name="Email" value><br>
2 checks: Can't be blank. A valid email address must contain an "@"
and a "." in the address.<p>
<input type="submit" name="Submit" value="Submit"> <p>
Numbers:</strong>
<input type="text" size="3" maxlength="3" name="numbers"><br>
2 checks: Can't be blank. Only numbers 0-9 accepted.<p>
Fruit<br>
<input type="radio" name="fruit" value="A"> A. Apples<br>
<input type="radio" name="fruit" value="B"> B. Oranges<br>
<input type="radio" name="fruit" value="C"> C. Pears<br>
<input type="radio" name="fruit" value="D"> D. Lemons<br>
1 check: At least one radio button must be selected.<p>
<br>
Range From:
<select NAME="rangefrom">
<option VALUE="0" selected>
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
</select>
To:
<select NAME="rangeto">
<option VALUE="0" selected>
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
</select><br>
3 checks: Must select at least one option from both the From and the To fields.
The FROM value must be less than or equal to the TO value.<p>
Select 1-5 Provinces: (0 or more than 5 not allowed)<br>
<select NAME="province" size="5" MULTIPLE>
<option value="AB">
Alberta, Canada
</option>
<option value="BC">
British Columbia, Canada
</option>
<option value="MB">
Manitoba, Canada
</option>
<option value="NB">
New Brunswick, Canada
</option>
<option value="NF">
Newfoundland, Canada
</option>
<option value="NS">
Nova Scotia, Canada
</option>
<option value="ON">
Ontario, Canada
</option>
<option value="PE">
Prince Edward Island, Canada
</option>
<option value="PQ">
Quebec, Canada
</option>
<option value="SK">
Saskatchewan, Canada
</option>
<option value="YT">
Yukon - N.W.T., Canada
</option>
</select>
<br>2 checks: At least 1 option must be selected.
No more than 5 options may be selected.
<p>
Number between 9 and 5000. Accepts commas:
Enter a number: <input type="text" size="5" maxlength="5" name="NumberText"><br>
5 checks: Cannot be blank. Must enter at least one character.
Can't enter more than 5 characters, including comma.
Must be between 9 and 5000. Accepts numbers, commas and hyphens,
so allows up to 5 characters for text field maxlength.<p>
Check Box: <input type="checkbox" name="checkbox1" value="Y"><br>
1 check: Reminds the user they have not checked the box.
Does not fail the validation however.<p>
Test Boxes: Check at least 1. No more than 2.
<input type="checkbox" name="checkbox2" value="1">Test1
<input type="checkbox" name="checkbox2" value="2">Test2
<input type="checkbox" name="checkbox2" value="3">Test3 <br>
2 checks: Requires at least one of the 3 checkboxes be selected.
Only allows a maximum of 2 boxes to be selected.<p>
<p>
<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset"><p>
</form>
|
