Article
Yet Another Article on Client Side Form Validation
Page: 1 2
Helper functions
There are two small functions that I've not mentioned yet. Firstly, we need to make sure that the browser can handle the script:
function DOMCheck() {
if(!document.getElementsByTagName('html')) {
alert("Sorry! Your browser does not support the W3C HTML DOM!");
}
}
This simply checks whether there is an html element. Note that if the <html> tags are omitted, Internet Explorer will still render the page as HTML but the return value from the script would be zero, thus giving an incorrect error message. Thus, always be good and include <html> tags in your document.
Secondly, we need to clear out the background color when the user enters a new value in the input tags:
function changeColor(th) {
//'resets' the background-color to white
th.style.background = "white";
}
Note that this does not work in Opera. This method is called from the input tag using the event handler 'onfocus'.
Source listing
The complete listing for our validation function looks like this:
function validate() {
var str = "";
var elements = document.getElementsByTagName('input');
// loop through all input elements in form
for(var i = 0; i < elements.length; i++) {
// check if element is mandatory; ie has a pattern
var pattern = elements.item(i).getAttribute('pattern');
if (pattern != null) {
var value = elements.item(i).value;
// validate the value of this element, using its defined pattern
var offendingChar = value.match(pattern);
// if an invalid character is found or the element was left emtpy
if(offendingChar != null || value.length == 0) {
// add up all error messages
str += elements.item(i).getAttribute('errorMsg') + "\n" +
"Found this illegal value: '" + offendingChar + "' \n";
// notify user by changing background color, in this case to red
elements.item(i).style.background = "red";
}
}
}
if (str != "") {
// do not submit the form
alert("ERROR ALERT!!\n" +str);
return false;
} else {
// form values are valid; submit
return true;
}
}
Further extensions
This idea of adding attributes can be further extended with attributes such as minimum and maximum values. Let's say that RegExp isn't enough, and we need to further qualify a given value:
Age: <input type="text" name="age" maxlength="2" size="2"
min_reqs="18" max_reqs="30" errorMsg="Age must be 18-30 years" />
Still using the same idea, generic validation code that can be used for all input tags that uses min/max values by adding some logic (within the validation function) for this input element.
var min_reqs = elements.item(i).getAttribute('min_reqs');
var max_reqs = elements.item(i).getAttribute('max_reqs');
if (min_reqs != null && max_reqs != null) {
var value = elements.item(i).value;
if (value < min_reqs || value > max_reqs) {
str += elements.item(i).getAttribute('errorMsg') + '\n';
}
}
Conclusion
Is this the way to go? Maybe not yet but in the very near future, when all or most users use an up-to-date browser. Of course there are other benefits of having a unified object model (DOM) for the browsers, but this little tip will make Web development a bit easier.
Resources
- Internet Explorer 6, Part I: DOM Standards Support at Webreference
- Traversing an HTML Table with JavaScript and DOM Interfaces from Mozilla
- Web specifications supported in Opera 4
- Regular Expressions by Stephen Ramsay
- Pattern Matching and Regular Expressions at Webreference
- Browser statistics