Integrates YAV form validation library as jQuery plugin adding accesibility, no intrusive, and standards compliant inline validation in web forms. Setup a form object with YAV validation with no intrusive HTML code and minimal JS code. The errors messages are associated to each form field that generates the error, and they are shown in a position related to the field (after, before, in the parent...) for better accesibility and screen reader improve. The parameters list for the plugin (see the examples) The yav variables list (not requires yav-config.js file) Setup a simple validation for the form with id #myForm using the default yav rules: "alnumhyphen","alnumhyphenat","alphabetic","alphanumeric","alphaspace", "date","date_le","date_lt","double","email","empty","equal","integer", "keypress","maxlength","minlength","notequal","numeric","numrange", "regexp" and "required". Set the proper rule in the class of the form field, the error message in the title attribute, and the param (if the rule requires it in the alt attribute as Map object: alt="{'params':'the param'}" or alt="{'params':['oneparam','twoparam',...]}" If the validation is ok then the form is submited (if the rest of form submit events handlers returns true), in other case shows the errors. Also you can set more than one rule using multiple classes (also you can use a CSS class normally) and the params must be as array of arrays (one array for each rule) class="equal maxlength another_css_class_not_rule" alt="{'params':[['one'],[10]]}" Alternatelly, because textarea and select fields has not alt attribute in W3C XHTML 1.0 standard, you can set the alt attribute inside the class attribute like this: class="rule another_rule {'params':[['one'],[10]]}" <form id="myForm" action="url_to_go" method="post|get"> <label>Name: <input type="text" id="name" name="name" class="alphaspace required" title="Please write only chars and spaces characters, this field is required"/> </label> <label>Email: <input type="email" id="email" name="email" title="Write a correct email address" /> </label> <input type="submit" value="Send" /> </form> $("#myForm").yav(); You can set a top message showing a custom message (a default text is used if you can not set "errorMessage" param and the errorDiv is found). Also you can indicate another ID for the top message div (default is "errorDiv"). If the validation process on submit is not OK then the errors are show and the page is scrolled to the top message. In the "custom" param, you can set and indefinited number of custom rules. A custom rule, returns null id OK and returnvalue (allways the first param) if is not OK. The custom rule can have any number of params. You can use then, the custom rule name in the class of the field for the validation.

$("#myForm").yav({
	"errorDiv":"TopError",
	"errorMessage":"Some errors are found, please correct them",
	"custom":{
		"myCustomRule1": function(returnvalue, param1, param2,...){
			if ($("textfield1").val() == param1){
				return null;
			}else{
				return returnvalue;
			}
		},
		"anotherCustomRule":....
	  }
	}
);

<form id="myForm" action="url_to_go" method="post|get"> <label>Name: <input type="text" id="name" name="name" class="myCustomRule1 required" title="Error message" alt="{ params: [ ['param1','param2'], [''] ] }"/> </label> <input type="submit" value="Send" /> </form> You can validate any field on event trigger using event parameter in alt attribute. This event parameter is one or a comma separated event list. $("#myForm").yav(); <form id="myForm" action="url_to_go" method="post|get"> <label>Name: <input type="text" id="name" name="name" class="required" title="Error message" alt="{event:'blur, change'}"/> </label> <input type="submit" value="Send" /> </form> A second Map (object) param in the plugin call you can set all the global variables for YAV config (you have not use yav-config.js file any more).

$("#myForm").yav({
	"errorMessage":"Errors are found"
},{
	"DATE_FORMAT":"MM/dd/yyyy",
	"inputclasserror":"fieldError"
});

In the first Map param, you have two more params ("onOk" and "onError"), these functions are called when the validation process is finished as passed or not passed. The function "onOk" is used by example, for AJAX submition of the data and it not submit the form normally. "form" param is the reference of the validated form.

$("#myForm").yav({
	"onOk":function(form){
		//executes any code before submit (the validation has been OK)
		//This is a simple method for cancel the normal way of submit and
		//submit the validated data using AJAX calls

		return true|false;  //if returns true form is submited, if false, form submit is cancelled
	},
	"onError":function(form){
		//executes any code if validation is not passed (the validation has been ERROR)
	}
});

The rest of valid params for the plugin are: "errorDiv", the id of the div (normally on the top of the form) that shows that errors have been found. The text of the div "errorDiv" is setted with "errorMessage" param. If errorDiv is not found the first error gets the focus, in other case "errorDiv" gets the focus. "errorClass" is the CSS class for the errors messages, the messages are inside a tag "p" by default, you can set other tag if you want ("div","span",...) "errorPosition" sets the position of the message over the affected id, this position use the common jQuery transversing functions, example of valid values ("before", "after","parent().before","parent().after",...

$("#myForm").yav({
	"errorDiv": "mainError",
	"errorMessage": "There are errors in the form",
	"errorClass": "error",
	"errorTag": "p",
	"errorPosition": "before"
});

You have 3 rules, the first for the numeric field called "name", the second for the alphabetic field called "email" and the third condition related the first and the second rule with a and rule, this conditional rule is passed if the first AND the second are passed. In the condition rule you set 'name' (an string for identify the condition rule), a 'type' of the condition, and the message to show the error. By default the message is show related with the ID of the first field of the rule (you don't need set all the condition params in the rest of the fields, only the 'name' identifier is necessary), if you want show the error message in other place, then set another param 'id' in the condition rule. {'condition':{'id':'another_id','name':'first_and','type':'and','msg':'Checks Name and Email field'} You can set three types of conditional rules 'and','or' and 'implies'. The validation dispatch an error if any of 3 before rules are not passed. $("#myForm").yav(); <form id="myForm" action="url_to_go" method="post|get"> <label>Name: <input type="text" id="name" name="name" class="numeric" title="Error message" alt="{ condition:{ name:'first_and', type:'and', msg:'Checks Name and Email field' } }"/> <input type="text" id="email" name="email" class="alphabetic" title="Error message" alt="{ condition:{name:'first_and'} }"/> </label> <input type="submit" value="Send" /> </form> The 'require' param works only with condition rules. You can set this param to 'pre-condition' (in AND and OR rules) or 'post-condition' (for the final IMPLIES rule). If require param is set, then the origin rule doesn't dispatch an error if fails, but the condition rule works normally. In the example case, the numeric and alphabetic rule don't generate an error message but if the AND condition fail then the condition message is shown. $("#myForm").yav(); <form id="myForm" action="url_to_go" method="post|get"> <label>Name: <input type="text" id="name" name="name" class="numeric" title="Error message" alt="{ require:'pre-condition', condition:{name:'first_and',type:'and',msg:'Checks Name and Email field'} }"/> <input type="text" id="email" name="email" class="alphabetic" title="Error message" alt="{ require:'pre-condition', condition:{'name':'first_and'} }"/> </label> <input type="submit" value="Send" /> </form> Multiple condition validation. You can write others 'condition's using an array of conditions. Alternately, you can express conditions over other conditions. By example, the this HTML code, you need express the conditions ('name' AND 'email') OR ('name2' AND 'email2'), each AND condition is defined by a NAME identifier 'first_and' and 'second_and', in the OR condition you can write a new param 'group' as array of the name of the others conditions. Also you can write the 'require' param in each condition if you don't want generate error messages. $("#myForm").yav(); <form id="myForm" action="url_to_go" method="post|get"> <label>Name: <input type="text" id="name" name="name" class="numeric" title="Error message" alt="{ require:'pre-condition', condition:[ { name:'first_and', type:'and', require:'pre-condition' }, { name:'group_or', group:['first_and','second_and'], type:'or', msg:'You need validate the first group or the second almost' } ] }"/> <input type="text" id="email" name="email" class="alphabetic" title="Error message" alt="{ require:'pre-condition', condition:{'name':'first_and'} }"/> <input type="text" id="name2" name="name2" class="numeric" title="Message" alt="{ require:'pre-condition', condition:{ name:'second_and', type:'and', require:'pre-condition' } }"/> <input type="text" id="email2" name="email2" class="alphabetic" title="Message" alt="{ require:'pre-condition', condition:{'name':'second_and'} }"/> </label> <input type="submit" value="Send" /> </form>