[{"options":[],"return":"Object jQuery","cat":"Plugins/Integration/Forms","type":"jQuery","desc":"Integrates YAV form validation library as jQuery plugin\nadding accesibility, no intrusive, and standards compliant\ninline validation in web forms.\n\nSetup a form object with YAV validation with no intrusive\nHTML code and minimal JS code. The errors messages are associated\nto each form field that generates the error, and they are shown\nin a position related to the field (after, before, in the parent...)\nfor better accesibility and screen reader improve.","author":"SeViR · José Francisco Rives Lirola (http://letmehaveblog.blogspot.com | http://www.sevir.org/en/)","params":[{"type":"Map","desc":"The parameters list for the plugin (see the examples)","name":"params"},{"type":"Map","desc":"The yav variables list (not requires yav-config.js file)","name":"yav_config"}],"short":"Integrates YAV form validation library as jQuery plugin\nadding accesibility, no intrusive, and standards compliant\ninline validation in web forms.","examples":[{"desc":"Setup a simple validation for the form with id #myForm using\nthe default yav rules:\n\"alnumhyphen\",\"alnumhyphenat\",\"alphabetic\",\"alphanumeric\",\"alphaspace\",\n\"date\",\"date_le\",\"date_lt\",\"double\",\"email\",\"empty\",\"equal\",\"integer\",\n\"keypress\",\"maxlength\",\"minlength\",\"notequal\",\"numeric\",\"numrange\",\n\"regexp\" and \"required\".\nSet the proper rule in the class of the form field, the error message\nin the title attribute, and the param (if the rule requires it in the\nalt attribute as Map object:\nalt=\"{'params':'the param'}\"\nor\nalt=\"{'params':['oneparam','twoparam',...]}\"\nIf the validation is ok then the form is submited (if the rest of form\nsubmit events handlers returns true), in other case shows the errors.\nAlso you can set more than one rule using multiple classes (also you can\nuse a CSS class normally) and the params must be as array of arrays (one\narray for each rule)\nclass=\"equal maxlength another_css_class_not_rule\" alt=\"{'params':[['one'],[10]]}\"\nAlternatelly, because textarea and select fields has not alt attribute in\nW3C XHTML 1.0 standard, you can set the alt attribute inside the class attribute\nlike this:  class=\"rule another_rule {'params':[['one'],[10]]}\"","after":"<form id=\"myForm\" action=\"url_to_go\" method=\"post|get\">\n\t<label>Name: \n\t\t<p class=\"error\">Please write only chars and spaces characters, this field is required</p>\n\t\t<input type=\"text\" id=\"name\" name=\"name\" class=\"alphaspace required\" \n\t\t\ttitle=\"Please write only chars and spaces characters, this field is required\"/>\n </label>\n\t<label>Email: \n\t\t<p class=\"error\">Write a correct email address</p>\n\t\t<input type=\"email\" id=\"email\" name=\"email\" title=\"Write a correct email address\" />\n\t</label>\n\t<input type=\"submit\" value=\"Send\" />\n</form>","before":"<form id=\"myForm\" action=\"url_to_go\" method=\"post|get\">\n\t<label>Name: \n\t\t<input type=\"text\" id=\"name\" name=\"name\" class=\"alphaspace required\" title=\"Please write only chars and spaces characters, this field is required\"/>\n </label>\n\t<label>Email: \n\t\t<input type=\"email\" id=\"email\" name=\"email\" title=\"Write a correct email address\" />\n\t</label>\n\t<input type=\"submit\" value=\"Send\" />\n</form>","code":"$(\"#myForm\").yav();"},{"desc":"You can set a top message showing a custom message (a default text is\nused if you can not set \"errorMessage\" param and the errorDiv is found). Also\nyou can indicate another ID for the top message div (default is \"errorDiv\").\nIf the validation process on submit is not OK then the errors are show and the\npage is scrolled to the top message.\n\nIn the \"custom\" param, you can set and indefinited number of custom rules. A custom\nrule, returns null id OK and returnvalue (allways the first param) if is not OK.\nThe custom rule can have any number of params. You can use then, the custom rule\nname in the class of the field for the validation.","code":"$(\"#myForm\").yav({\n\t\"errorDiv\":\"TopError\",\n\t\"errorMessage\":\"Some errors are found, please correct them\",\n\t\"custom\":{\n\t\t\"myCustomRule1\": function(returnvalue, param1, param2,...){\n\t\t\tif ($(\"textfield1\").val() == param1){\n\t\t\t\treturn null;\n\t\t\t}else{\n\t\t\t\treturn returnvalue;\n\t\t\t}\n\t\t},\n\t\t\"anotherCustomRule\":....\n\t  }\n\t}\n);","before":"<form id=\"myForm\" action=\"url_to_go\" method=\"post|get\">\n\t<label>Name: \n\t\t<input type=\"text\" id=\"name\" name=\"name\" class=\"myCustomRule1 required\" title=\"Error message\" \n\t\t\talt=\"{\n\t\t\t\tparams:\n\t\t\t\t\t[\n\t\t\t\t\t\t['param1','param2'],\n\t\t\t\t\t\t['']\n\t\t\t\t]\n\t\t\t}\"/>\n </label>\n\t<input type=\"submit\" value=\"Send\" />\n</form>"},{"desc":"You can validate any field on event trigger using event parameter in alt attribute.\nThis event parameter is one or a comma separated event list.","code":"$(\"#myForm\").yav();","before":"<form id=\"myForm\" action=\"url_to_go\" method=\"post|get\">\n<label>Name: \n\t\t<input type=\"text\" id=\"name\" name=\"name\" class=\"required\" title=\"Error message\" \n\t\t\talt=\"{event:'blur, change'}\"/>\n </label>\n\t<input type=\"submit\" value=\"Send\" />\n</form>"},{"desc":"A second Map (object) param in the plugin call you can set all the\nglobal variables for YAV config (you have not use yav-config.js file any more).","code":"$(\"#myForm\").yav({\n\t\"errorMessage\":\"Errors are found\"\n},{\n\t\"DATE_FORMAT\":\"MM/dd/yyyy\",\n\t\"inputclasserror\":\"fieldError\"\n});"},{"desc":"In the first Map param, you have two more params (\"onOk\" and \"onError\"),\nthese functions are called when the validation process is finished as passed or\nnot passed. The function \"onOk\" is used by example, for AJAX submition of the \ndata and it not submit the form normally. \"form\" param is the reference of the \nvalidated form.","code":"$(\"#myForm\").yav({\n\t\"onOk\":function(form){\n\t\t//executes any code before submit (the validation has been OK)\n\t\t//This is a simple method for cancel the normal way of submit and\n\t\t//submit the validated data using AJAX calls\n\n\t\treturn true|false;  //if returns true form is submited, if false, form submit is cancelled\n\t},\n\t\"onError\":function(form){\n\t\t//executes any code if validation is not passed (the validation has been ERROR)\n\t}\n});"},{"desc":"The rest of valid params for the plugin are: \"errorDiv\", the id of the\ndiv (normally on the top of the form) that shows that errors have been found.\nThe text of the div \"errorDiv\" is setted with \"errorMessage\" param. If errorDiv\nis not found the first error gets the focus, in other case \"errorDiv\" gets the\nfocus. \"errorClass\" is the CSS class for the errors messages, the messages are\ninside a tag \"p\" by default, you can set other tag if you want (\"div\",\"span\",...)\n\"errorPosition\" sets the position of the message over the affected id, this position\nuse the common jQuery transversing functions, example of valid values (\"before\",\n\"after\",\"parent().before\",\"parent().after\",...","code":"$(\"#myForm\").yav({\n\t\"errorDiv\": \"mainError\",\n\t\"errorMessage\": \"There are errors in the form\",\n\t\"errorClass\": \"error\",\n\t\"errorTag\": \"p\",\n\t\"errorPosition\": \"before\"\n});"},{"desc":"You have 3 rules, the first for the numeric field called \"name\", the second for the \nalphabetic field called \"email\" and the third condition related the first and the second\nrule with a and rule, this conditional rule is passed if the first AND the second are passed.\nIn the condition rule you set 'name' (an string for identify the condition rule), a 'type' of\nthe condition, and the message to show the error. By default the message is show related with the\nID of the first field of the rule (you don't need set all the condition params in the rest of the\nfields, only the 'name' identifier is necessary), if you want show the error message in other place,\nthen set another param 'id' in the condition rule.\n{'condition':{'id':'another_id','name':'first_and','type':'and','msg':'Checks Name and Email field'}\nYou can set three types of conditional rules 'and','or' and 'implies'. The validation dispatch\nan error if any of 3 before rules are not passed.","code":"$(\"#myForm\").yav();","before":"<form id=\"myForm\" action=\"url_to_go\" method=\"post|get\">\n\t<label>Name: \n\t\t<input type=\"text\" id=\"name\" name=\"name\" class=\"numeric\" title=\"Error message\" \n\t\t\talt=\"{\n\t\t\t\tcondition:{\n\t\t\t\t\tname:'first_and',\n\t\t\t\t\ttype:'and',\n\t\t\t\t\tmsg:'Checks Name and Email field'\n\t\t\t\t}\n\t\t\t}\"/>\n\t\t<input type=\"text\" id=\"email\" name=\"email\" class=\"alphabetic\" title=\"Error message\" \n\t\t\talt=\"{\n\t\t\t\tcondition:{name:'first_and'}\n\t\t\t}\"/>\n </label>\n\t<input type=\"submit\" value=\"Send\" />\n</form>"},{"desc":"The 'require' param works only with condition rules. You can set this param to 'pre-condition'\n(in AND and OR rules) or 'post-condition' (for the final IMPLIES rule). If require param is set, then\nthe origin rule doesn't dispatch an error if fails, but the condition rule works normally. In the example\ncase, the numeric and alphabetic rule don't generate an error message but if the AND condition fail then\nthe condition message is shown.","code":"$(\"#myForm\").yav();","before":"<form id=\"myForm\" action=\"url_to_go\" method=\"post|get\">\n\t<label>Name: \n\t\t<input type=\"text\" id=\"name\" name=\"name\" class=\"numeric\" title=\"Error message\" \n\t\t\talt=\"{\n\t\t\t\trequire:'pre-condition',\n\t\t\t\tcondition:{name:'first_and',type:'and',msg:'Checks Name and Email field'}\n\t\t\t}\"/>\n\t\t<input type=\"text\" id=\"email\" name=\"email\" class=\"alphabetic\" title=\"Error message\" \n\t\t\talt=\"{\n\t\t\t\trequire:'pre-condition',\n\t\t\t\tcondition:{'name':'first_and'}\n\t\t\t}\"/>\n </label>\n\t<input type=\"submit\" value=\"Send\" />\n</form>"},{"desc":"Multiple condition validation. You can write others 'condition's using an\narray of conditions. Alternately, you can express conditions over other conditions.\nBy example, the this HTML code, you need express the conditions \n('name' AND 'email') OR ('name2' AND 'email2'), each AND condition is defined by a\nNAME identifier 'first_and' and 'second_and', in the OR condition you can write a new\nparam 'group' as array of the name of the others conditions.\nAlso you can write the 'require' param in each condition if you don't want generate\nerror messages.","code":"$(\"#myForm\").yav();","before":"<form id=\"myForm\" action=\"url_to_go\" method=\"post|get\">\n\t<label>Name: \n\t\t<input type=\"text\" id=\"name\" name=\"name\" class=\"numeric\" title=\"Error message\" \n\t\t\talt=\"{\n\t\t\t\trequire:'pre-condition',\n\t\t\t\tcondition:[\n\t\t\t\t\t{\n\t\t\t\t\t\tname:'first_and',\n\t\t\t\t\t\ttype:'and',\n\t\t\t\t\t\trequire:'pre-condition'\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname:'group_or',\n\t\t\t\t\t\tgroup:['first_and','second_and'],\n\t\t\t\t\t\ttype:'or',\n\t\t\t\t\t\tmsg:'You need validate the first group or the second almost'\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t}\"/>\n\t\t<input type=\"text\" id=\"email\" name=\"email\" class=\"alphabetic\" title=\"Error message\" \n\t\t\talt=\"{\n\t\t\t\trequire:'pre-condition',\n\t\t\t\tcondition:{'name':'first_and'}\n\t\t\t}\"/>\n\t\t<input type=\"text\" id=\"name2\" name=\"name2\" class=\"numeric\" title=\"Message\" \n\t\t\talt=\"{\n\t\t\t\trequire:'pre-condition',\n\t\t\t\tcondition:{\n\t\t\t\t\tname:'second_and',\n\t\t\t\t\ttype:'and',\n\t\t\t\t\trequire:'pre-condition'\n\t\t\t\t}\n\t\t\t}\"/>\n\t\t<input type=\"text\" id=\"email2\" name=\"email2\" class=\"alphabetic\" title=\"Message\" \n\t\t\talt=\"{\n\t\t\t\trequire:'pre-condition',\n\t\t\t\tcondition:{'name':'second_and'}\n\t\t\t}\"/>\n </label>\n\t<input type=\"submit\" value=\"Send\" />\n</form>"}],"tests":[],"name":"yav"}]