Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Simple JQuery validations - testing ground
JavaScript
branch: master

This branch is 11 commits ahead, 5 commits behind mvlwn:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
lib
qunit
test
.cupboard
.gitignore
README.md
jquery.validator-form.js
project.sublime-project
project.sublime-workspace

README.md

validator-form -- Flexible jQuery Validation

Description

ValidatorForm is inspired by the jQuery Validation Plugin (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) and the jQuery Validation From Scratch tutorial (http://webcloud.se/log/Form-validation-with-jQuery-from-scratch/)

The goal is to make a lightweight framework for form validation. It should be easy to extend for personal usage.

The script has been tested with jQuery 1.6 on IE8, Firefox 6,7, Safari 5 and Chrome 14

Basic Usage

Simple form

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "required format",
        pattern: "^[a-zA-Z ]{1,30}$"
      }
    }
  });
  <form id="myform" action="#" method="post" onsubmit="return false;">
    <p>
        <label for="name">Name</label><br/>
        <input type="text" value="" name="name" id="name" />
    </p>
  </form>

Advanced Usage

Custom Rules

  $.validator.addRule("my_custom_rule", function(element, event){
    var valid = false;
    // Do stuff to test the result
    return valid;
  });

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "my_custom_rule"
      }
    }
  });

Conditional Requirement

The required validation will only be triggered if this checkbox is checked.

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "required",
        required: function(){ $("#check-name").is(":checked"); }
      }
    }
  });
  <form id="myform" action="#" method="post" onsubmit="return false;">
    <p>
        <label for="check-name">Check name</label><br/>
        <input type="text" value="1" name="check-name" id="check-name" />
    </p>
    <p>
        <label for="name">Name</label><br/>
        <input type="text" value="" name="name" id="name" />
    </p>
  </form>

HTML-attribute conditions

  $("#myform").validatorForm();
  <form id="myform" action="#" method="post" onsubmit="return false;">
    <p>
        <label for="name">Name</label><br/>
        <input type="text" value="" name="name" id="name"
          data-validation="required format" data-pattern="^[a-zA-Z ]{1,30}$" />
    </p>
  </form>

Errorlists

Default errorlist

By default the errorlist will be a list. The output will look like this:

  <form id="myform" action="#" method="post" onsubmit="return false;">
    <p class="error">
        <label for="name">Name</label><br/>
        <input type="text" value="" name="name" id="name" class="error" />
        <ul class="errorlist">
          <li>This field is required</li>
          <li>The format of this field is incorrect</li>
        </ul>
    </p>
  </form>

Custom errorlist

Return an alertbox and give the object an highlight the field with the error classname

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "required"
      }
    },
    displayErrorlist: fuction(element, errors){
      var errorClass = element.form.settings.errorClass;
      element.object.addClass(errorClass);

      var label = element.container.find("[for=" + element.object.id + "]);
      var txt = "The field " + label.text() + " contains errors:\n";
      $.each(errors, function(i, error){
        txt += "- " + error + "\n";
      })
      alert(txt);
    }
  });

Handlers

There are 2 types of handlers available. 1 custom handlers for the validatorForm and standard jquery events on the elements.

ValidatorForm handlers

The handlers will be called when the form does certain events. The following list of handlers are available:

  • beforeValidate
  • afterValidate
  • beforeSubmit
  • afterSubmitFailed
  • afterSubmitSuccess

The handler-function should look something like this:

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "required"
      }
    },
    beforeSubmit: beforeSubmitHandler,
    afterSubmitFailed: afterSubmitFailedHandler
  });


  // disable all fields
  function beforeSubmitHandler(form, event){
    $.each(form.elements, function(i, element)){
      element.object.attr("disabled", "disabled");
    }
  }

  // enable all fields on failure
  function afterSubmitFailedHandler(form, event){
    $.each(form.elements, function(i, element)){
      element.object.attr("disabled", "");
    }
  }

ValidatorElement handlers

The handlers will be called when the validate method is called on the element.

  • beforeValidate
  • afterValidate

The handler-function should look something like this:

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "required",
        beforeValidate: function(){
          // Do stuff here
        },
        afterValidate: function(){
          // Do other stuff here
        }
      }
    }
  });

Custom ValidatorElement handlers

You can make handlers of your own in your rules.

  $.validator.addRule("my_custom_rule", function(element, event){
    element.callHandler("beforeMyCustomRule");
    var valid = false;

    // Do stuff to test the result
    return valid;
  });

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "my_custom_rule",
        beforeMyCustomRule: function(){
          var element = this;
          // Do something
        }
      }
    }
  });

jQuery events on Validator elements

All jQuery events can be used. While creating the element, the jQuery object will bind this event. Full list of events can be found here: http://api.jquery.com/category/events/

  $("#myform").validatorForm({
    input: {
      "name": {
        validation: "required"
      }
    },
    events: {
      "focusin": function(){ $(this).effect("highlight", {}, 2000)};
    }
  }

Built-in rules

  • Required: This rule checks if there is a value for a form-element. The validation will only hit on submit.
  • Format: Regex check on the value of the form-element. Will use the data-pattern attribute
  • Maxlength: Will trigger when length of the value is too long.
  • Minlength: Will trigger when the length of the value is too short.
Something went wrong with that request. Please try again.