Using regex patterns for verifying input

We have recently been using HTML 5 and JavaScript to do form verification, as Fahad blogged about here. 

I have just added pattern matching to this for email and telephone number verification. Thanks to +Exson Qu  for the regex ju-ju. 

HTML5 allows form elements of type "tel" and "email". We want to add in a regular expression to each of these types to verify the element as it is typed. The regular expressions we have used are "[0-9 +s()]*" for the telephone numbers, and "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" for email addresses. Neither of these are 100% as it is not possible to deal with every method in the world of writing telephone numbers, and every method of constructing emails addresses, however these will do a good job on most.

It is feasible to add html in the form:

<input type="tel" name="Telephone" pattern="[0-9 +s()]*" value="" />

However this would need to be done wherever there is a telephone or fax number to be entered into KwaMoja. Then if we decide to improve the regex we would need to go through all these entries again. This can get messy.

It would be better to do this via JavaScript. We have a function called initial() that gets called when the page has been loaded. This function iterates through all the form elements in the page that has just been loaded and appends the regex pattern any with a type "tel" or a type "email". Here is the function:

function initial() {
    var n = document.getElementsByTagName("input");
    for (i = 0; i < n.length; i++) {
        if (n[i].type == "tel") n[i].pattern = "[0-9 +s()]*";
        if (n[i].type == "email") n[i].pattern = "^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$";
    }
}

We also use this function to assign other properties to form elements.