jQuery validationEngine: Extended jQuery form validations

The jquery.validationEngine plugin for form validation is a good example of un-obtrusive validation. Its clean, neat, simple, beautiful UI, yet powerful validation plugin. This plugin is having most of the form fields validations that are commonly required in any project.

I have extended it for one of my projects by adding three functions to it.

See working example – http://www.navayan.com/register.php

I have added following three functions to core jquery.validationEngine plugin to extend the power of jquery form validation on the fly:

1. _maxListOptions() - this will check whether the limit of selecting the options from <select> dropdown list is not more than specified.
2. _minListOptions() - Similarly this function will prompt to select at least one option from <select> dropdown list.
3. _checkDuplicate() - This function will check the uniqueness of the two specified form fields

Above functions in details:

_maxListOptions: function(field, rules, i, options) {
  var listItems = rules[i + 1];
  var groupname = field.attr("name");
  var groupSize = $("select[name='" + groupname + "'] option:selected").size();
  if (groupSize > listItems) {
    var rule = options.allrules.maxListOptions;
    return rule.alertText + listItems + rule.alertText2;
  }
},

_minListOptions: function(field, rules, i, options) {
  var listItems = rules[i + 1];
  var groupname = field.attr("name");
  var groupSize = $("select[name='" + groupname + "'] option:selected").size();
  if (groupSize < listItems) {
    var rule = options.allrules.minListOptions;
    return rule.alertText + listItems + rule.alertText2;
  }
},

_checkDuplicate: function(field, rules, i, options) {
  var equalsField = rules[i + 1];
  if (field.attr('value') == $("#" + equalsField).attr('value'))
    return options.allrules.checkDuplicate.alertText;
},

Adding method in _validateField() function:

case "maxListOptions":
  errorMsg = methods._maxListOptions(field, rules, i, options);
  field = $($("select[name='" + fieldName + "']"));
  break;
case "minListOptions":
  errorMsg = methods._minListOptions(field, rules, i, options);
  field = $($("select[name='" + fieldName + "']"));
  break;
case "checkDuplicate":
  errorMsg = methods._checkDuplicate(field, rules, i, options);
  break;

Setting rules for new methods with validation messages:

"maxListOptions": {
  "regex": "none",
  "alertText": "* Select max ",
  "alertText2": " options only"
},

"minListOptions": {
  "regex": "none",
  "alertText": "* Select minimum ",
  "alertText2": " option"
},

"checkDuplicate": {
  "regex": "none",
  "alertText": "* Duplicate entry"
},

Things that need to be present in the class attribute of form elements:

validate[required,minListOptions[1],maxListOptions[3]]
validate[checkDuplicate[primary_email],custom[email]]

Actual screenshot of working copy

Following things that are required to work around:

BASIC HTML FORM:

  <form id="form_contact" action="#" method="post">
    <ul>
      <li>Occupation *</li>
      <li>
        <select class="validate[required,minListOptions[1],maxListOptions[3]]" multiple="multiple" id="occupation" name="occupation">
            <option value="1">Accountant</option>
            <option value="2">Admin Officer</option>
            <option value="3">Air Hostess</option>
            <option value="4">Archaeologist</option>
            <option value="5">Architect</option>
            <option value="6">CEO</option>
            <option value="7">Charted Accountant</option>
        </select>
        <small>Select minimum one and maximum three occupations</small>
      </li>
    </ul>
    <ul>
        <li>Primary email</li>
        <li>someone@gmail.com <input type="hidden" value="someone@gmail.com" id="primary_email" name="primary_email"/></li>
    </ul>
    <ul>
        <li>Secondary email</li>
        <li><input type="text" class="validate[checkDuplicate[primary_email],custom[email]]" value="someone@yahoo.com" id="secondary_email" name="secondary_email"/></li>
    </ul>
    <ul>
        <li>&nbsp;</li>
        <li><input type="submit" value="Update" name="submit"></li>
    </ul>
  </form>

CSS

<link type="text/css" rel="stylesheet" media="all" href="http://cross-browser-reset-css-framework.googlecode.com/files/cbresetcss-1.4.css" />
<link type="text/css" rel="stylesheet" href="http://jquery-validatation-engine-extended.googlecode.com/files/validationEngine.jquery.css" />

JAVASCRIPTS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-validatation-engine-extended.googlecode.com/files/jquery.validationEngine.js"></script>
<script type="text/javascript" src="http://jquery-validatation-engine-extended.googlecode.com/files/jquery.validationEngine-en.js"></script>
<script type="text/javascript">
  $(function(){
    $('#form_contact').each(function(){
      $(this).validationEngine();
    });
  });
</script>

Navayan.com jQuery validationEngine works in IE9 also

Working example – http://www.navayan.com/register.php

Advertisement