Verify.js

Adding Rules

Method	Description	Parameters
$.verify.addRules({...})	Add new field rules	A map (Object) of rule names to Definition Objects.
$.verify.addGroupRules({...})	Add new group rules	A map (Object) of rule names to Definition Objects.
$.verify.updateRules({...})	Update existing rules	A map (Object) of rule names to Definition Objects. Only existing rules will be updated.

The difference between field and group rules is largely outlined in the Groups section above. There are also differences in the Rule Object of each.

Definition Object

Property	Type	Description
fn	Function	The rule entry point (required)
extend	String	The name of the parent rule to extend
regex	RegExp	A regular expression used to construct a fn property
anything	Any	A variable that will be passed to the Rule Object

If your rule only has the one 'fn' property:

$.verify.addRules({
  myRule: {
    fn: function(r) {
      return r.val() === "42" ? true : "Wasn't 42";
    }
  }
});

Then it can be shortened to:

$.verify.addRules({
  myRule: function(r) {
    return r.val() === "42" ? true : "Wasn't 42";
  }
});

Regular expression shortcut:

$.verify.addRules({
  myRule: {
    regex: /^[ab]+$/i
    message: "It contained something other than 'a's and 'b's"
  }
});

So if the rule has a regex and an optional message property, its fn property will automatically built.

Use of variables:

$.verify.addRules({
  myRule: {
    expected: "42",
    message: "Wasn't 42",
    fn: function(r) {
      return r.val() === r.expected ? true : r.message;
    }
  }
});

The above example isn't very exciting, though when it comes time to use multiple languages, you can just update the message:

$.verify.updateRules({
  myRule: {
    message: "no tuvo éxito"
  }
});

Now, getting abit fancier, we can extend existing rules with the extend property

$.verify.addRules({
  myRule: {
    message: "An error",
    
    common: function(n) {
      //a useful task...
    },
    
    fn: function(r) {
      r.common(21);
      return r.message;
    }
  },
  
  //Alternative uses of 'common'
  myOtherRule: {
    extend: "myRule",
    
    fn: function(r) {
      r.common(42);
      return r.message; //"An Error"
    }
  },
  
  //Only modify the 'message'
  myThirdRule: {
    extend: "myRule",
    message: "A super bad error"
  }
});

 

Rule Object

The Rule Object is the single parameter in all validation rules. It is known as r in the examples.

Type	Property	Type	Description	Parameters
Field Only	field	JQuery Object	A reference to element being validated	None
	val()	Function	An alias tor.field.val()	None (Getter) / Value (Setter)
Group Only	field(id)	Function	Gets a field by group ID	id
	val(id)	Function	An alias tor.field(id).val()	id (Getter) / id,Value (Setter)
Documentation in progress...

 

Selector API

Method	Description	Parameters
$("#my-form").validate(...)	Programmatically trigger validation on every element in the form.	callback(success)
$("#my-text-input").validate(...)	Programmatically trigger validation on a single element.	callback(success)

How To Option

There are two levels of options:

• Global Options
• Form Specific Options

The form specific options prototypically inherit from the global options. Since they aren't copied, any changes to the globals will propogate through to each validation form on the page.

 

These options can be changed using the Configure API above.

Name	Description	Default
debug	Display log messages flag	false
validateAttribute	Attribute to use for listing validation rules	"data-validate"
validationEventTrigger	Event which will trigger validation	"blur"
scroll	Automatically scroll viewport to the first error	true
focusFirstField	Automatically focus into to the first field with an error	true
hideErrorOnChange	Hide error while the user is editing the field	false
skipHiddenFields	Whether to skip the hidden fields with validators	true
errorContainer	A function which returns the element in which to add or remove the "errorClass"	function(input) { return input; }
errorClass	The class name to be toggled on the "errorContainer"	"error"
beforeSubmit	Pre-form-submit hook. If you return true, form will submit.	function(form, result) { return result; }
track	Method used for tracking user validation interactions. Read more here Validation Tracking	$.noop
prompt	Method used to display validation errors. Read more here Prompt Handler	function(element, text, opts) { $.notify(element, text,opts); }

Validation Tracking

The Validation Tracking Handler is a function which looks like function(type, fieldId, result)

• type - Currently, there is only one type: "Validate"
• fieldId - Field Identifier is made up of the form name followed by the field name. Name is id attribute, otherwise falls back to the name attribute, otherwise falls back to a randomly generated ID.
• result - The validation result will be one of:
  1. "Valid"
  2. "Skip" (Meaning the field was hidden or has no validators)
  3. The error message that was displayed on the field

This was intended for use with Google Analytics Event Tracking. Following it's 3 column implementation: Category, Action and Label.

An example function to track validations using Google Analytics might be something like:

$.verify({
  track: function(type, fieldId, result) {
    if(_gaq) _gaq.push(['_trackEvent', type, fieldId, result]);
  }
});

Also note, only validations triggered from the validationEventTrigger ("blur" by default) will be tracked. This prevents false positives from early form validations.

Prompt Handler

The Prompt Handler is a function which looks like function(element, text[, opts]). So a really simple function might be:

$.verify({
  prompt: function(element, text) {
    alert(text);
  }
});

Or you might want to get abit more fancy with some assistance of HTML:

<input type='text' data-validate='required'/>
<span class='tip'></span>

$.verify({
  prompt: function(element, text) {
    element.siblings(".tip").html(text || '');
  }
});