Well, I am still looking for a tutorial so I know which questions to
ask. I have some great regex links, it's just pulling it all together
that seems to be a problem. If you search for "form validation
tutorial" on google there are 1600 hits. I'd like to narrow it down a
bit and find something fairly comprehensive.
So again, I ask, does anyone know of a really good javascript
validation tutorial on the web?
No tutorial, but then it's not really a big subject.
Rule one of client-side validation: It can be bypassed.
If your server depends on its input being in a certain format, it
should test it itself. Client-side validation is only a help to the
user, allowing him to get instant feedback instead of waiting for a
server request.
That also means that clint-side validation should try to accept
the same values as the server-side validation. If that is not possible
(some values might need to be compared to others only available on
the server), the client-side validation should err on the side of
permitting too much, not too little.
You can choose to validate a field when it is changed (each keypress or
when leaving the field) or all the fields when the form is submitted.
The last option is the most common, the simplest, and often sufficient.
To validate a form when it is to be submitted, add a call to the
validation in the form element's onsubmit handler:
<form action="..." method="..." onsubmit="return validateForm(this);">
There are many other ways to call a validation method, all inferior to
this one, which means that the validation is called independently of
how the user triggers the submit (submit button or pressing return
in a field or something else) but also that the form submit still works
with Javascript turned off.
The function can do whatever it needs to validate the fields, and it
can report errors in many different ways too. I recommend showing the
error messages on the page, not just in an alert, since that goes away
before the user can start editing. One solution is to add a red border
to the erroneous fields and adding the error message to the title
attribute.
An example validation function:
---
<script type="text/javascript">
function markInvalid(field, message) {
field.style.border = "2px solid red";
field.title = field.title.replace(/ERROR:[\s\S]*$/,"") + "ERROR:\n" + message;
}
function markValid(field) {
field.style.border = "";
field.title = field.title.replace(/ERROR:[\s\S]*$/,"");
}
function validateForm(theForm) {
var elems = theForm.elements;
var errors = false;
var phoneField = elems['phone'];
if (!/^\d{6,}$/.test(phoneField.value)) {
markInvalid(phoneField, "Phone number must be supplied "+
"(at least six digits and no non-digits)");
errors = true;
} else {
markValid(phoneField);
}
var agreeField = elems['agreement'];
if (!agreeField.checked) {
markInvalid(agreeField, "You must agree to the Terms of Service");
errors = true;
} else {
markValid(agreeField);
}
if (errors) {
alert("Form contains errors. These must be corrected before submission.\n"+
"Errors are marked with red border. Hoover for explanation of error");
}
return !errors;
}
</script>
----
It matches a form with at least the following fields:
---
<form action="" onsubmit="return validateForm(this);">
<label for="phoneFieldId">Phone: </label>
<input type="text" name="phone" id="phoneFieldId"
title="Enter your contact phone number (6+ digits)"><br>
<label for="agreeFieldId">I agree to the Terms of Service</label>
<input type="checkbox" name="agreement" id="agreeFieldId"
title="Check to mark your agreement"> <br>
<input type="submit" value="I submit">
</form>
