Jquery Client Side JS Validation examples

5 comments

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>&nbsp;</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>&nbsp;</td>
</tr>



 

Comments


Leave a Comment