How to put in a custom validator with jQuery validate
For my current project I needed a custom validator method for the jQuery validator plug-in. I wanted to validate that a user has chosen a value from a combo box where the value is of type Guid.
First I implemented a JavaScript function which tests whether a given value represent a valid Guid but not an empty Guid (An empty Guid has the following form: 00000000-0000-0000-0000-000000000000). To achieve this result I use regular expressions
var isValidGuid = function(value) {
var validGuid = /^(\{|\()?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}(\}|\))?$/;
var emptyGuid = /^(\{|\()?0{8}-(0{4}-){3}0{12}(\}|\))?$/;
return validGuid.test(value) && !emptyGuid.test(value);
}
The above function returns true for a valid Guid and false for every thing else.
Now I have to add this validation method to the validator plug-in as follows
$.validator.addMethod("isValidGuid", function(value, element) {
return isValidGuid(value);
}, 'Please select a valid and non empty Guid value.');
Finally I can use this custom validation method on any form element by assigning it the class isValidGuid, e.g.
<select id="title" class="isValidGuid" title="Please select a title!">
<option value="00000000-0000-0000-0000-000000000000" selected="selected">(select)</option>
<option value="33a1eb15-cdbc-4c85-be01-dcb4f393c0a5">Engineer</option>
<option value="43b5d0f7-4915-41f1-b3b9-d6335299cc22">Physicist</option>
<option value="d80322f2-bb76-447c-a6ac-77f145bac70d">Technician</option>
</select>
Some more examples
//used in an image onclick event, should return false to the onclick if there //was an error. eg: onclick="return checklogin()" function checklogin() { var msg = '' var obj = $('#Code') if(obj.val().length==0 && msg==''){msg = "You have not entered your user name";obj[0].focus()} obj = $('#Password') if(obj.val().length==0 && msg==''){msg = "You have not entered your password";obj[0].focus()} if(msg!=''){alert(msg)} return (msg=='') //return true if there is no warning message } How to check for a certain age in a date using jquery validate: also example of adding a jquery validate rule <%=new Forms.DateField(record.Fields.custentity_dob, true){EarliestYear = DateTime.Now.AddYears(-75).Year, LatestYear = DateTime.Now.AddYears(-25).Year}%> <script type="text/javascript"> $(document).ready(function () { $.validator.addMethod("Age", function() { var DOB = new Date($("#custentity_dob").val()) var eday = new Date(); //get today eday.setFullYear(eday.getFullYear() - 21); //set to 21 years ago //if older than 21 if(DOB < eday) { return true; } else { return false; } }, 'You must be older than 21'); $("#custentity_dob").rules("add", { date:true, Age:true }); }); </script> between two dates: <tr> <td class="label">Date of Birth</td> <td class="field"> <%=new Forms.DateField(record.Fields.custentity_dob, true){EarliestYear = DateTime.Now.AddYears(-75).Year, LatestYear = DateTime.Now.AddYears(-25).Year}%> <script type="text/javascript"> $(document).ready(function () { $.validator.addMethod("Age", function() { var DOB = new Date($("#custentity_dob").val()) var eday = new Date(); //get today var oday = new Date(); //get today eday.setFullYear(eday.getFullYear() - 25); //set to 25 years ago oday.setFullYear(oday.getFullYear() - 70); //set to 70 years ago return (DOB < eday && DOB > oday); }, 'You must be older than 21 and younger than 70'); $("#custentity_dob").rules("add", { date:true, Age:true }); }); </script> </td> <td class="required">*</td> <td> </td> </tr> <tr> <td class="label">Phone (pref direct dial)<small><br />Include international dialling codes</small></td> <td class="field"><%=new Forms.TextField(record.Fields.phone, true){cssClass="NumbersOnly"} %> <script type="text/javascript"> $(document).ready(function(){ $.validator.addMethod("NumbersOnly", function(value, element) { return this.optional(element) || /^[0-9\-\+]+$/i.test(value); }, "Phone must contain only numbers, + and -."); }); </script> </td> <td class="required">*</td> <td> </td> </tr>
Leave a Comment
Comments