Monday, December 13, 2010

Form Validation update

Previous post on the same subject saw a list of functions. Below is a modified update.

var errMsg="";
var $vF= function(qtype,query,query2,startw,endw){
//use $vF() without param to echo errMsg and clears it for the next form validation.
var tempMsg="";
var varRegEx=/.+/;
var testvalue="";
if (startw==null)
startw=""
if (endw==null)
endw=""
var regExAry={
"Empty":" must not be empty\n",
"SqlOK":" must not be empty or contains tab, enter, quotation marks, ampersand or semicolon character\n",
"Email":" is not valid Email\n",
"URL":" is not valid URL\n",
"Number":" is not valid Number\n",
"Alpha":" must not be empty and is Alphabet and space only\n",
"Integer":" is not valid Integer\n",
"Range":" is not between " +startw+ " and "+ endw+"\n",
"Zip":" is not valid Post Code\n",
"Positive":" is not positive number\n",
"Begin":" must start with "+startw+" and is "+endw+" digits\n",
"Date":" is not valid Date (DMY, MDY, or YMD)\n",
"YMD":" is not valid Date (DMY, MDY, or YMD)\n",
"Phone":" is not a valid phone number\n",
"Pwd":" must start with an Alphabet followed by at least one each of upper case, lower case, number and special characters. Length must be "+startw + " to "+endw+" characters\n",
"Radio":" must have a selecstion\n",
"Select": " must have a selection\n",
"CheckBox":" must be checked\n",
"CheckBoxList":" must have at least one item checked\n",
"AgteB":" must be greater than or equal "+endw+"\n",
"AeqB":" must be same as "+endw+"\n",
"Fixed":" must be exactly "+startw+" characters\n",
"Maxlen":" must not exceed "+startw+" characters\n",
"Name":" must be proper name with caps on every first character of word\n"
}
if (qtype!="Radio" && qtype !="Select" && typeof(qtype) != "undefined")
testvalue=query.value
switch (qtype){
case "Empty":
varRegEx=/.+/
break
case "SqlOK":
if (query.nodeName != "TEXTAREA")
varRegEx=/[\0\f\n\r\t\v'"&;]/
else
varRegEx=/[\0'"&;]/
break
case "Email":
varRegEx = /^([a-z0-9]+)([_\-.][a-z0-9]+)*@+([a-z0-9]+)([_\-.][a-z0-9]+)*[.]+[a-z]{2,4}$/i;
break
case "URL":
varRegEx = /^(HTTPS?|FTP):\/\/[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,4}(\/.+)*\/?$/i;
break
case "Alpha":
varRegEx = /(^[a-z ]+$)/i;
break
case "Number":
varRegEx = /(^[+-]?[0-9]+\.[0-9]{1,}$)|(^[+-]?[0-9]+$)/;
break
case "Integer":
varRegEx = /^[+-]?[0-9]+$/;
break
case "Range":
var locRegEx = /^[0-9]+$/;
var localtest=locRegEx.test(testvalue)
if (localtest){
testvalue=testvalue*1
if (testvalue < startw || testvalue > endw)
testvalue=""
}
else
testvalue="true"
break
case "AgteB":
// B is actually less than A so no need a "Less Than" test.
var locRegEx = /^[0-9]+$/;
var swv=startw.value*1
var localtest=locRegEx.test(testvalue)
if (localtest){
testvalue=testvalue*1
if (testvalue < swv)
testvalue=""
}
else
testvalue="true"
break
case "AeqB":
if (testvalue != startw.value)
testvalue=""
break
case "Zip":
varRegEx = /^[0-9]{6}$/;
break
case "Fixed":
varRegEx = new RegExp("^(.|\n){"+startw+"}$")
break
case "Maxlen":
varRegEx = new RegExp("^(.|\n){1,"+startw+"}$")
break
case "Positive":
varRegEx = /(^[+]?[0-9]+\.[0-9]+$)|(^[+]?[0-9]+$)/;
break
case "Begin":
startw +=""
var myrlen=endw-startw.length
startw = startw.replace(/\\/g,"\\\\")
startw = startw.replace(/\//g,"\/")
startw = startw.replace(/\-/g,"\-")
varRegEx = new RegExp("(^"+startw+"[0-9]{"+myrlen+"}$)","");
break
case "Date":
varRegEx = /^((0?[1-9]|1[0-2])[\/-](0?[1-9]|(1[0-9]|2[0-9])|3[01])[\/-][12][0-9]{3})|((0?[1-9]|[12][0-9]|3[01])[\/-](0?[1-9]|1[0-2])[\/-][12][0-9]{3})|([12][0-9]{3}[\/-](0?[1-9]|1[0-2])[\/-](0?[1-9]|[12][0-9]|3[01]))$/;
break
case "YMD":
varRegEx = /^[12][0-9]{3}[\/-](0?[1-9]|1[0-2])[\/-](0?[1-9]|[12][0-9]|3[01])$/;
break
case "Phone":
varRegEx = /^(\+?65)?[689]{1}[0-9]{7}$/
break
case "Pwd":
varRegEx = new RegExp("(?=^.{"+startw+","+endw+"}$)[a-zA-Z]+(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[^a-zA-Z0-9])")
break
case "Name":
varRegEx = /^[A-Z][a-z]+( [A-Z][a-z.]+)*( [A-Z]+)*$/
break
case "Radio":
for (radb=0;radb<query.length;radb++){
if (query[radb].checked == true)
testvalue="true"
}
break
case "Select":
if (query.selectedIndex != 0)
testvalue="true"
break
case "CheckBox":
if (query.checked == false)
testvalue=""
break
case "CheckBox":
if (query.checked == false)
testvalue=""
break
case "CheckBoxList":
var qform=query.form
var x
var qcnt=0
for (x=0;x<qform.elements.length;x++){
if (qform.elements[x].name == query.name){
if(qform.elements[x].checked == true)
qcnt=1
}
}
if (qcnt==0)
testvalue=""
break
default:
if(errMsg !="")
alert(errMsg)
errMsg=""
return 0
}
if ((varRegEx.test(testvalue)== false && qtype !="SqlOK") ||(qtype=="SqlOK" && varRegEx.test(testvalue)==true))
errMsg +=query2+regExAry[qtype]
return 0
};

The use of the above is quite straightforward. There is no setting required. Just perform the validation straight away. There is only a caveat that you should be aware of . The errMsg string will keep concatenating every time you run the function until you run the function without parameters.

Basically you should do the following.

obj=document,formname
$vF("Empty",obj.StartDate,"Registration Date")
$vF("Email",obj.Email,"Email")
$vF()

The function has 3-5 parameters. Most of the functions only uses 3. Javascript can accept null input parameters. The first parameter tells the function what test you are performing on the next parameter which is the form input element name to be tested. The third parameter is the user friendly name for the input element.

Fourth and fifth parameter is used for start/stop, max/min number for range test. It is also used to define a second input element name and its friendly name respectively. Some of the fourth parameter contains a number and there is no fifth parameter. This is usually used for testing for a fixed length of input.

You need not perform the test only once per input element. More test can be performed on the same input. For example, you perform a test on an input to ensure that it is a integer number and then perform another test on the same element to ensure that the number is exactly 6 digits.

At times you may want to perform condtional validation test. That is to say the input may not have entry but if it has an entry then the validation is performed, then you have to enclose the function with a condition test to ensure that the validation is bypassed if there is no input. The reason being all validation requires input to have a value (except the empty test).

$vF() will output the failed validation messages. At the same time it clears the errMsg content so that you could perform new set of tests.


No comments:

Post a Comment