Menu
I have managed to figure out how to 'error' alert if the passwords do not match, but this does not prevent a user from still submitting the form altogether. Can someone please explain how I can write a statement that checks that everything returns true before allowing the user to submit the form with an onsubmit function?
Please note that I understand that I have not written a function called validateForm that is noted in the onsubmit HTML of the form, I just know that this needs to be there for when I have written this function
Here is the link to the jsfiddle: http://jsfiddle.net/shanny/VSUM6/28/
And here is the code again:
HTML:
<html>
<h1>Form Validation</h1>
<div id="error"></div>
<form name="myForm" action="" method="post" target="_blank" onsubmit="return validateForm()">
First Name: <input type="text" name="firstName" autofocus required >
<br />
Last Name: <input type="text" name="lastName" required >
<br />
Email: <input id="email" type="email" name="email" placeholder="e.g., [email protected]" required>
<br />
Password: <input type="password" name="password1" id="password1" required >
<br />
Confirm Password: <input type="password" name="password2" id="password2" required > <p id="error2"></p>
<br /><br />
Sex:
<input type="radio" name="sex" value="male" >Male
<input type="radio" name="sex" value="female">Female
<br /><br />
Quantity:<br />
<input name ="scale" type="range" min="1" max="6" step="1" value="1" >
<br />
1 2 3 4 5 6
<br /><br />
Interests (select all that apply):
<br />
<input type="checkbox" class="radio" name="interests" value="running">This
<input type="checkbox" class="radio" name="interests" value="swimming">That
<input type="checkbox" class="radio" name="interests" value="hiking">Other
<br /><br />
<input name="submit" id="submit" type="submit" value="Hayo!">
</form>
</html>
JavaScript:
var errorBox=document.getElementById("error");
var errorText=document.getElementById("error2");
var pass2=document.getElementById("password2");
var pass1=document.getElementById("password1");
pass2.onchange = function() {
if (pass2.value !== pass1.value) {
pass2.style.border="2px solid red";
errorText.innerHTML="Passwords do not match!";
errorText.style.color="red";
//errorBox.style.height="40px";
//errorBox.style.visibility="visible";
//errorBox.innerHTML="<p>Passwords do not match!</p>";
return false;
}
else {
pass2.style.border="2px solid #B5DCF7";
errorText.style.color="green";
errorText.innerHTML="Passwords match!";
return true;
}
};
294
The easiest way to prevent the default behavior of the form submit is to have your function return false. This will stop the form from submitting.
var onSubmitHandler = function(event){
/* validate here */
return false;
};
The other (and technically better) way is to call preventDefault on the event object that is passed as a parameter to your onSubmit function. The only issue is that some older versions of IE don't support this method, so you'll need to provide a fallback for this case:
var onSubmitHandler = function(event){
/* validate here */
if(event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
