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.

Demo

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]]

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> </li>
    <li><input type="submit" value="Update" name="submit"></li>
  </ul>
</form>

Styling form and messages with CSS

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

Javascripts that are needed

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

Navayan.com jQuery validationEngine works in IE9

Navayan.com jQuery validationEngine works in IE9 also

Demo

You might also like:

Related Post