The following javacript is used for validation checking. However the alert
statements do not appear when there is missing input.
I tried to delete the if statement and use only the alert statement and the
script works fine.
Is there anything wrong with the if statements?
Below is my HTML code:
<html>
<head>
<title>A More Complex Form with JavaScript Validation</title>
<script type="text/javascript">
// Validation form
function validate_form()
{
valid = true;
// check for missing name
if ( document.contact_form.contact_name.value == "" )
{
alert("Please fill in the 'Your Name' box,");
valid = false;
}
// check for missing gender
if ( document.contact_form.gender[0].checked == false ) && (
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
// check for missing age
if ( document.contact_form.age.selectedIndex == 0 )
{
alert("Please select your Age.");
valid = false;
}
// check for missing terms
if ( document.contact_form.terms == false )
{
alert("Please check the Terms & Conditions box.");
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h1>Please Enter Your Details Below</h1>
<form name="contact_form" onsubmit="validate_form()">
<p>Your Name:
<input type="text" name="contact_name" size="20">
</p>
<p>
Your Gender:
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</p>
<p>
Your Age:
<select name="age">
<option value="1">0-14 years</option>
<option value="2">15-30 years</option>
<option value="3">31-44 years</option>
<option value="4">45-60 years</option>
<option value="5">61-74 years</option>
<option value="6">75-90 years</option>
</select>
</p>
<p>
Do you agree to the Terms and Conditions?
<input type="checkbox" name="terms" value="yes">Yes
</p>
<input type="submit" name="submit" value="Send Details">
</form>
</body>
</html>
if ( document.contact_form.gender[0].checked == false ) && (
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
you have to change if condition like that
if ( document.contact_form.gender[0].checked == false &&
document.contact_form.gender[1].checked == false )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
Your script can't fire up because of this mistake.
Tip: You can check script errors from dev-console of browsers like Chrome Console.
as "trincot" said by comment, you can also use ! operator to check boolean values like that.
if ( !document.contact_form.gender[0].checked && !document.contact_form.gender[1].checked )
{
alert("Please choose your Gender: Male or Female");
valid = false;
}
Related
I'm trying to make a simple form with JavaScript validation. It has four fields: title, email address, rating and comments. As far as I know, the code I have here should work to validate the form and I should not be allowed to submit it but whenever I press the submit button none of the prompts appear and the browser submits the form. Could someone let me know where I am going wrong please? I'd imagine there is a simple solution or something I am forgetting but I'm pretty new to this so apologies if it's something very obvious.
The HTML and JavaScript code is:
<html>
<head>
<script type="text/javascript">
function validateForm()
{
var e=document.forms["review"]["Title"].value;
var s=document.forms["review"]["Email"].value;
var t=document.forms["review"]["Rating"].value;
var c=document.forms["review"]["Comments"].value;
var atsym=s.indexOf("#");
var dotsym=s.lastindexOf(".");
if (e==null || e=="")
{
document.getElementById("valAlert").innerHTML="Please Enter a Title";
return false;
}
else if (s==null || s=="" || atsym<1 || dotsym<atsym+2 || dotsym+2>=s.length)
{
document.getElementById("valAlert").innerHTML="That is not a valid email address!";
return false;
}
else if (t=="0")
{
document.getElementById("valAlert").innerHTML="You must enter a rating";
return false;
}
else if (c==null || c=="")
{
document.getElementById("valAlert").innerHTML="You need to enter some kind of comment.";
return false;
}
else
{
alert ("Your review of " + t + "has been submitted!");
}
}
</script>
</head>
<body>
<div id="valAlert"></div>
<form name="review" onsubmit="return validateForm()">
<fieldset>
Enter Title:
<input type="text" name="Title">
</br>
</br>
Enter Email Address:
<input type="text" name="Email">
</br>
</br>
Please Enter Your Rating:
<select name="Rating">
<option value="0">(Please select a rating)</option>
<option value="1S">1 Star</option>
<option value="2S">2 Stars</option>
<option value="3S">3 Stars</option>
<option value="4S">4 Stars</option>
<option value="5S">5 Stars!</option>
</select>
</br>
</br>
<textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
</fieldset>
</br>
</br>
<fieldset>
<input class="button" type="submit" value="Submit"/>
</fieldset>
</form>
</body>
please make a null value check before doing the operations like below
var dotsym=s.lastindexOf(".");
Add the null check for variable 's'.Please check the function naming convention below
obj.lastindexOf(); TO obj.lastIndexOf(".");
You’ve said there were no errors, but you might just be missing them when the form submits and the console is cleared.
If you’re using Chrome/Chromium, you can enable breaking on exceptions in the Sources tab of the developer tools (the icon on the far right should be purple or blue):
In Firefox, it’s in the Debugger Options menu:
As #Rajesh says, the casing you have on lastindexOf is wrong; it should be lastIndexOf.
Now, let’s fix everything else up, starting with formatting:
<html>
<head>
<script type="text/javascript">
function validateForm()
{
var e = document.forms["review"]["Title"].value;
var s = document.forms["review"]["Email"].value;
var t = document.forms["review"]["Rating"].value;
var c = document.forms["review"]["Comments"].value;
var atsym = s.indexOf("#");
var dotsym = s.lastIndexOf(".");
if (e == null || e == "")
{
document.getElementById("valAlert").innerHTML = "Please Enter a Title";
return false;
}
else if (s == null || s == "" || atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length)
{
document.getElementById("valAlert").innerHTML = "That is not a valid email address!";
return false;
}
else if (t == "0")
{
document.getElementById("valAlert").innerHTML = "You must enter a rating";
return false;
}
else if (c == null || c == "")
{
document.getElementById("valAlert").innerHTML = "You need to enter some kind of comment.";
return false;
}
else
{
alert("Your review of " + t + " has been submitted!");
}
}
</script>
</head>
<body>
<div id="valAlert"></div>
<form name="review" onsubmit="return validateForm()">
<fieldset>
Enter Title:
<input type="text" name="Title" />
</br>
</br>
Enter Email Address:
<input type="text" name="Email" />
</br>
</br>
Please Enter Your Rating:
<select name="Rating">
<option value="0">(Please select a rating)</option>
<option value="1S">1 Star</option>
<option value="2S">2 Stars</option>
<option value="3S">3 Stars</option>
<option value="4S">4 Stars</option>
<option value="5S">5 Stars!</option>
</select>
</br>
</br>
<textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
</fieldset>
</br>
</br>
<fieldset>
<input class="button" type="submit" value="Submit" />
</fieldset>
</form>
</body>
You’re missing a DTD and a closing </html>, so add those:
<!DOCTYPE html>
<html>
…
</html>
Next, </br> doesn’t exist. It’s <br />.
<form name="review" onsubmit="return validateForm()">
<fieldset>
Enter Title:
<input type="text" name="Title" />
<br />
<br />
Enter Email Address:
<input type="text" name="Email" />
<br />
<br />
Please Enter Your Rating:
<select name="Rating">
<option value="0">(Please select a rating)</option>
<option value="1S">1 Star</option>
<option value="2S">2 Stars</option>
<option value="3S">3 Stars</option>
<option value="4S">4 Stars</option>
<option value="5S">5 Stars!</option>
</select>
<br />
<br />
<textarea name="Comments" rows="8" colspan="40">Comments:</textarea>
</fieldset>
<br />
<br />
<fieldset>
<input class="button" type="submit" value="Submit" />
</fieldset>
</form>
Here:
var e = document.forms["review"]["Title"].value;
var s = document.forms["review"]["Email"].value;
var t = document.forms["review"]["Rating"].value;
var c = document.forms["review"]["Comments"].value;
the properties are valid JavaScript identifiers, so you can write them with the dot syntax:
var e = document.forms.review.Title.value;
var s = document.forms.review.Email.value;
var t = document.forms.review.Rating.value;
var c = document.forms.review.Comments.value;
You should probably give them clearer names, too; I think you used the wrong one in that last alert, and this will help:
var title = document.forms.review.Title.value;
var email = document.forms.review.Email.value;
var rating = document.forms.review.Rating.value;
var comments = document.forms.review.Comments.value;
Next, you don’t need elses when you’re returning from the if case no matter what, so you can drop those. The values of text inputs can never be null, so stop checking for those. It’ll also save some typing (or copying) to keep valAlert as a variable.
var atsym = email.indexOf("#");
var dotsym = email.lastindexOf(".");
var valAlert = document.getElementById("valAlert");
if (title === "") {
valAlert.innerHTML = "Please Enter a Title";
return false;
}
if (atsym < 1 || dotsym < atsym + 2 || dotsym + 2 >= s.length) {
valAlert.innerHTML = "That is not a valid email address!";
return false;
}
if (rating == "0") {
valAlert.innerHTML = "You must enter a rating";
return false;
}
if (comments == "") {
valAlert.innerHTML = "You need to enter some kind of comment.";
return false;
}
alert("Your review of " + title + " has been submitted!");
Voilà! But wait; there’s more. The best things in life web development don’t need JavaScript, and this is no exception.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 validation</title>
</head>
<body>
<form>
<fieldset>
<label>
Enter title:
<input type="text" name="title" required />
</label>
<label>
Enter e-mail address:
<input type="email" name="email" required />
</label>
<label>
Please enter your rating:
<select name="rating" required>
<option>(Please select a rating)</option>
<option value="1S">1 Star</option>
<option value="2S">2 Stars</option>
<option value="3S">3 Stars</option>
<option value="4S">4 Stars</option>
<option value="5S">5 Stars!</option>
</select>
</label>
<textarea name="comments" rows="8" cols="40" placeholder="Comments" required></textarea>
</fieldset>
<fieldset>
<button class="button">Submit</button>
</fieldset>
</form>
</body>
</html>
I beg to differ on your comments. You are getting console errors. Specially, it is erroring out whenever you try to run the parsers on s and s is empty. You need to move the logic into the if clause AFTER you have verified it has a value:
else if (s == null || s == "") {
document.getElementById("valAlert").innerHTML = "Please enter an email address";
return false;
}
else if (s.indexOf("#") < 1 || s.lastindexOf(".") < s.indexOf("#")+ 2 || s.lastindexOf(".")+ 2 >= s.length) {
document.getElementById("valAlert").innerHTML = "This is not a valid email address!";
return false;
}
Here is a Fiddle
This is my form
Select Staff : <select name="Staff" id="Staff"><br />
<option value="Staff">Select Staff</option>
The validation for the form is as simple this
<script type="text/javascript" language="javascript">
function validateMyForm ( ) {
var isValid = true;
if ( document.form1.Name.value == "" ) {
alert ( "Please type your Name" );
isValid = false;
} else if ( document.form1.Staff.value == "Staff" ) {
alert ( "Please choose Staff" );
isValid = false;
}
return isValid;
}
</script>
How do I validate radio buttons using JS ?
<input type="radio" name="question" id="question_yes" value="Yes" />Yes<br>
<input type="radio" name="question" id="question_no" value="No" />No
<script>
if(document.getElementById('question_yes').checked) {
// yes is checked
}else if(document.getElementById('question_no').checked) {
// no is checked
}
</script>
Here's a jsFiddle to show you how it works: http://jsfiddle.net/A3fg8/
I have a form that I'm trying to validate, but the email, select country fields seems that are not being validated. Can some one tell me what is the problem?
Here is my javascript:
<script type="text/javascript">
function validateEmail()
{
var emailID = document.form1.EMail.value;
atpos = emailID.indexOf("#");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.form1.EMail.focus() ;
return false;
}
return( true );
}
function validate()
{
//username password First_n Last_n Company Mobile Email Residence
if( document.form1.First_n.value == "" )
{
alert( "Please enter your first name!" );
document.form1.First_n.focus() ;
return false;
}
if( document.form1.Last_n.value == "" )
{
alert( "Please enter your last name!" );
document.form1.Last_n.focus() ;
return false;
}
if( document.form1.username.value == "" )
{
alert( "Please enter your username!" );
document.form1.username.focus() ;
return false;
}
if( document.form1.password.value == "" )
{
alert( "Please enter your password!" );
document.form1.password.focus() ;
return false;
}
if( document.form1.Company.value == "" )
{
alert( "Please provide us your company name!" );
document.form1.Company.focus() ;
return false;
}
if( document.form1.Mobile.value == "" )
{
alert( "Please provide us your mobile number!" );
document.form1.Mobile.focus() ;
return false;
}
if( document.form1.Email.value == "" )
{
alert( "Please provide us your Email!" );
document.form1.Email.focus() ;
return false;
}
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail();
if( ret == false )
{
return false;
}else
return true;
}
if( document.form1.Zip.value == "" ||
isNaN( document.form1.Zip.value ) ||
document.form1.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.form1.Zip.focus() ;
return false;
}
if( document.form1.Residence.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
</script>
And my form html:
<form name="form1" method="post" action="add_new.php" onsubmit="return(validate());">
<div style="clear:both;padding:0px 10px 0 10px;margin-bottom:20px;">
<h5>Interested in</h5>
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="false" type="radio" checked>
<label for="toggle-on" class="btn">Hosting</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="true" type="radio"
><label for="toggle-off" class="btn">Email accounts</label>
</div>
<div style="clear-both;">
<input name="First_n" type="text" placeholder="First Name" class="login-text-lbl-pink-no-width" id="First_n">
<input name="Last_n" type="text" placeholder="Last Name" class="login-text-lbl-pink-no-width" id="Last_n">
</div>
<input name="username" type="text" placeholder="Username" class="login-text-lbl-pink-no-width" id="username"><br/>
<input name="password" type="password" placeholder="Password" class="login-text-lbl-pink-no-width" id="password"><br/>
<input name="Company" type="text" placeholder="Company" class="login-text-lbl-pink-odd" id="Company"> <br/>
<input name="Mobile" type="text" placeholder="Mobile Phone" id="login-text-lbl" class="pink-transparent-item" id="Mobile"> <br/>
<input name="Email" type="text" placeholder="Email" class="login-text-lbl-pink-odd" class="pink-transparent-item" id="Email"> <br/>
<select name="Residence" id="Residence" id="login-text-lbl" style="
background-color: rgba(240, 96, 96, 0.62);
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 30px;
margin: 5px;
font-style: italic;
width: 90%;
padding: 5px;
color: #34584b;
float: none;"
>
<option value="-1" selected>[choose country]</option>
<option value="US">America</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="HK">Hong Kong</option><br/>
<input name="domain" class="pink-transparent-item" type="text" placeholder="Existing domain" id="login-text-lbl" id="domain"> <br/>
<input type="submit" name="Submit" value="Submit" style='font-family: "Neo Sans Light", Verdana, Tahoma;' class="login-button-pink">
</form>
you form has email id as : "Email" while your validation code has EMail (var emailID = document.form1.EMail.value;)? Use correct control id.
And yes of course you can use regex to validate which is even better.
there's a few things wrong here, but let's try and answer your questions specifically -
Email works fine for me in chrome and firefox, though can't speak for safari, IE, seamonkey, etc.
Your validateEmail() method has the input named as EMail - you won't get it. JS is Case-sensitive.
Even after you do validate, you'll never get to anything past Email because of the return true you have after bringing back the value of validateEmail(). you've left validate() at that point.
As for the other things - you should really run your code through JSLint to check it for errors. I see a couple unclosed braces. I say JSLint because it seems you're a relative beginner at JS, so you probably need the more fundamentalist approach that Crockford brings to code, at least for a little while until you get good at it (no offense intended; we all start at the beginning).
It would probably a lot easier to just use regex for email validation. Check out this StackExchange answer for a good example.
Code snippet from the answer:
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\
".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
Do couple of things :
1) Put alert statements in your "validate()" and "validateEmail()" functions and make sure you're receiving all the values you expect.
2) If you're using IE, try to load your application in either Chrome or FireFox and go through the built-in debuggers setting up breakpoints in your JS functions.
You can actually use the regular expression method form Fuzzley's answer , for the country field part try using this code,
var country= document.form1.Residence.value ;
if(country != "America"|| country != "Germany"||country != "Italy"||country != "Hong Kong") {
alert("Please provide your country!");
return false;
}
I'm having small trouble with javascript validation. I need to validate the select dropdown in my form. I can validate all fields so far but somehow I cannot validate the select dropdown list? Can someone help me validate my form?
Here is my javascript:
<script type="text/javascript">
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}
}
}
function validate()
{
//username password First_n Last_n Company Mobile Email Residence
if( document.form1.First_n.value == "" )
{
alert( "Please enter your first name!" );
document.form1.First_n.focus() ;
return false;
}
if( document.form1.Last_n.value == "" )
{
alert( "Please enter your last name!" );
document.form1.Last_n.focus() ;
return false;
}
if( document.form1.username.value == "" )
{
alert( "Please enter your username!" );
document.form1.username.focus() ;
return false;
}
if( document.form1.password.value == "" )
{
alert( "Please enter your password!" );
document.form1.password.focus() ;
return false;
}
if( document.form1.Mobile.value == "" )
{
alert( "Please provide us your mobile number!" );
document.form1.Mobile.focus() ;
return false;
}
if( document.form1.Email.value == "" )
{
alert( "Please provide us your Email!" );
document.form1.Email.focus() ;
return false;
}
var yourSelect = document.getElementById('Residence');
alert(yourSelect.options[yourSelect.selectedIndex].value)
if(yourSelect.options[yourSelect.selectedIndex].value == '' )
{
alert( "Please provide your country!" );
return false;
}
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}
}
return( true );
}
</script>
And my form:
<form name="form1" method="post" action="add_new.php" onsubmit="return(validate(false));">
<div style="clear:both;padding:0px 10px 0 10px;margin-bottom:40px;">
<h5>Interested in</h5>
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="Hosting" type="radio" checked>
<label for="toggle-on" class="btn">Hosting</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="Email accounts" type="radio"
><label for="toggle-off" class="btn">Email accounts</label>
</div>
<div style="clear-both;">
<input name="First_n" type="text" placeholder="First Name*" class="login-text-lbl-pink-no-width" id="First_n">
<input name="Last_n" type="text" placeholder="Last Name*" class="login-text-lbl-pink-no-width" id="Last_n">
</div>
<input name="username" type="text" placeholder="Username*" class="login-text-lbl-pink-no-width" id="username"><br/>
<input name="password" type="password" placeholder="Password*" class="login-text-lbl-pink-no-width" id="password"><br/>
<input name="Company" type="text" placeholder="Company" class="login-text-lbl-pink-odd" id="Company"> <br/>
<input name="Mobile" type="text" placeholder="Phone Number*" class="pink-transparent-item" id="Mobile"> <br/>
<input name="Email" type="text" placeholder="Email*" class="login-text-lbl-pink-odd" id="Email"> <br/>
<select name="Residence" id="Residence" style="background-color: rgba(240, 96, 96, 0.62);border: none;-webkit-appearance: none;
-moz-appearance: none;appearance: none;height: 40px;font-style: italic;width: 270px;padding: 10px;margin: 5px;color: #552726;border-radius: 5px;border: none;float: left;" class="required">
<option value="zero" selected>Country*</option>
<option value="US">America</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="HK">Hong Kong</option><br/>
<input name="domain" class="login-text-lbl-pink-odd" type="text" style="width:350px;margin-bottom:40px;" placeholder="Existing domain" id="domain"> <br/>
<input type="submit" name="Submit" value="Submit" style='font-family: "Neo Sans Light", Verdana, Tahoma;' class="login-button-pink">
</form>
I believe the problem is in the email validation that happens just before the country validation, because if an email address is entered it returns from the function regardless of whether the email passed validation, so it never gets to the country bit:
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}else
return true; // delete this line, and the else
}
You want to return false if there's a problem, but you don't want to return true until the end of the function.
UPDATE: The code now shown in the updated question doesn't work because:
You deleted the validateEmail() function declaration (replacing it with a copy of the code I said to change at the end of validate() - unless that was just a weird copy/paste error in the question)
You changed the if test on the country to check for an empty string, but didn't update the corresponding value="zero" to be value=""
If you fix those it works as shown here: http://jsfiddle.net/58A7K/
Note also that the code I showed above can be simplified - you don't need the ret variable:
if( document.form1.Email.value != "" ) {
if (!validateEmail(document.form1.Email)) {
return false;
}
}
The problem is with following code:
if( document.form1.Email.value != "" )
{
// Put extra check for data format
var ret = validateEmail(document.form1.Email);
if( ret == false )
{
return false;
}else
return true;
}
In the above code, when user enters a valid email, your are returning TRUE as a result the code for validating country is never executed.
Remove the else part from above code snippet.
The validation of the checkbox doesn't work. It doesn't give any error. Could you please help me to fix it? And how can I combine errors in one alert instead of one by one?
Thanks for any help.
Html code:
<form class="contact_form" action="" method="post" name="contact_form" onsubmit="returnonFormSubmit(this)">
<li>
<label for="First Name">First Name:</label>
<input type="text" name="visitor_name" /><br />
</li>
<li>
<label for="condition">I agree with the terms and conditions.</label>
<input type="checkbox" name="lan" /><br />
</li>
<li>
<label for="Male">Male:</label>
<input type="radio" name="gender" value="m" /> Female:<input type="radio" name="gender" value="f" /><br />
</li>
<li>
<label for="National Rating">National Rating:</label>
<select name="make">
<option selected>-- SELECT --</option>
<option> Below 1200 </option>
<option> 1200 - 1500 </option>
<option> 1500 - 1800 </option>
<option> 1800 - 2100 </option>
<option> Above 2100 </option>
</select><br />
</li>
<li>
<button class="submit" type="submit">Submit</button>
</li>
<div id="error_message" style="color:#ff0000;"></div>
javascript code:
function onFormSubmit(form_element)
{
var checked = 0;
var letters = /^[a-zA-Z]+$/;
if (form_element.visitor_name.value.match(letters))
{
true;
}
else
{
alert("Please enter a valid first name. For example; John.");
false;
}
if (form_element.lan.checked == false)
{
alert("Please accept the terms and conditions");
false;
}
if (form_element.gender[0].checked == false && form_element.gender[1].checked == false)
{
alert("Please select a gender.");
false;
}
if (form_element.make.selectedIndex == 0)
{
alert("Please select your rating interval.");
form_element.make.focus();
false;
}
return true;
}
You should concatenate the error messages in a variable.
function onFormSubmit(form_element)
{
var checked = 0;
var letters = /^[a-zA-Z]+$/;
var errorMessage = "";
if (!form_element.visitor_name.value.match(letters))
{
errorMessage += "Please enter a valid first name. For example; John.\n";
}
if (form_element.lan.checked == false)
{
errorMessage += "Please accept the terms and conditions\n";
}
if (errorMessage != "")
{
alert(errorMessage);
return false;
}
return true;
}
You have a typo in onsubmit="returnonFormSubmit(this)". It should be
onsubmit="return onFormSubmit(this)"
Running this with a console open would give you a valuable error/warning. Try Chrome's Developer Tools, Firefox' Firebug or similar.
To combine the errors into one, you could start out with an empty string msg = '' and append to it if there is an error. Then at the bottom of your function, alert(msg) and return false if it is non-empty, otherwise return true.
After fixing typo in returnonFormSubmit(this) it works in Chrome and Firefox.
(BTW: you forget returns)
To combine alerts I would use an array.
Example:
function onFormSubmit(form_element)
{
var checked = 0;
var letters = /^[a-zA-Z]+$/;
var alerts = new Array();
if (!form_element.visitor_name.value.match(letters))
alerts.push("Please enter a valid first name. For example; John.");
if (!form_element.lan.checked)
alerts.push("Please accept the terms and conditions");
if (alerts.length == 0) {
return true;
}
alert(alerts.join("\n"));
return false;
}