{"id":13877504,"url":"https://github.com/posabsolute/jQuery-Validation-Engine","last_synced_at":"2025-07-16T13:31:53.874Z","repository":{"id":635760,"uuid":"276963","full_name":"posabsolute/jQuery-Validation-Engine","owner":"posabsolute","description":"jQuery form validation plugin","archived":false,"fork":false,"pushed_at":"2021-09-09T14:10:33.000Z","size":1890,"stargazers_count":2568,"open_issues_count":33,"forks_count":1202,"subscribers_count":191,"default_branch":"master","last_synced_at":"2024-11-21T00:30:01.284Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posabsolute.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2009-08-13T12:58:48.000Z","updated_at":"2024-11-17T23:09:58.000Z","dependencies_parsed_at":"2022-07-07T14:25:11.715Z","dependency_job_id":null,"html_url":"https://github.com/posabsolute/jQuery-Validation-Engine","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2FjQuery-Validation-Engine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2FjQuery-Validation-Engine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2FjQuery-Validation-Engine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posabsolute%2FjQuery-Validation-Engine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posabsolute","download_url":"https://codeload.github.com/posabsolute/jQuery-Validation-Engine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226134226,"owners_count":17578778,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-06T08:01:03.933Z","updated_at":"2024-11-24T06:31:08.697Z","avatar_url":"https://github.com/posabsolute.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Animation"],"sub_categories":["Validation"],"readme":"jQuery.validationEngine v3.1.0\n=====\n\nLooking for official contributors\n---\nThis project has now been going on for more than 7 years, right now I only maintain the project through pull request contributions. However, I would love to have help improving the code quality and maintain an acceptable level of open issues.\n\n\nSummary\n---\n\n**jQuery validation** engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10).\nThe plugin provides visually appealing prompts that grab user attention on the subject matter.\n\nValidations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions.\nBundled with many locales, the error prompts can be translated into the language of your choice. \n\n\n\n![Screenshot](https://github.com/posabsolute/jQuery-Validation-Engine/raw/master/css/screenshot.png)\n\nDocumentation :\n---\n### [Nicer documention](http://posabsolute.github.com/jQuery-Validation-Engine/)\n### [Release Notes](https://github.com/posabsolute/jQuery-Validation-Engine/releases)\n \n\nInstallation\n---\n\n### What's in the archive?\n\nDownload\n\n[tar.gz 3.0.0](https://github.com/posabsolute/jQuery-Validation-Engine/archive/v3.0.0.tar.gz)\nor\n[zip 3.0.0](https://github.com/posabsolute/jQuery-Validation-Engine/archive/v3.0.0.zip)\n\n\nThe archive holds, of course, the core library along with translations in different languages.\nIt also comes with a set of demo pages and a simple ajax server (built in Java and php).\n\n1. Unpack the archive\n2. Include the script jquery.validationEngine.closure.js in your page \n3. Pick the locale of the choice and include it in your page: jquery.validationEngine-XX.js\n4. **Read this manual** and understand the API\n\nUsage\n---\n\n### References\n\nFirst include jQuery on your page\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js\" type=\"text/\njavascript\"\u003e\u003c/script\u003e\n```\n    \nInclude *jquery.validationEngine* and its locale\n\n```html\n\u003cscript src=\"js/jquery.validationEngine-en.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jquery.validationEngine.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nFinally include the desired theme\n\n```html\n\u003clink rel=\"stylesheet\" href=\"css/validationEngine.jquery.css\" type=\"text/css\"/\u003e\n```\n\n### Field Validations\n\nValidations are defined using the field's **class** attribute. Here are a few examples showing how it happens:\n\n```html\n\u003cinput value=\"someone@nowhere.com\" class=\"validate[required,custom[email]]\" type=\"text\" name=\"email\" id=\"email\" /\u003e\n\u003cinput value=\"2010-12-01\" class=\"validate[required,custom[date]]\" type=\"text\" name=\"date\" id=\"date\" /\u003e\n\u003cinput value=\"too many spaces obviously\" class=\"validate[required,custom[onlyLetterNumber]]\" type=\"text\" name=\"special\" id=\"special\" /\u003e\n```\n\nFor more details about validators, please refer to the section below.\n\n#### Experimental attribute data-validation-engine\n\nWe are currently in the process of replaceing the class attribute by something more standard, it should normally work but consider this feature in beta.\n     \u003cinput value=\"someone@nowhere.com\" data-validation-engine=\"validate[required,custom[email]]\" type=\"text\" name=\"email\" id=\"email\" /\u003e\n\n#### Standard HTML5 attribute for error message\n\nCustomize error messages with data-errormessage and data-errormessage-* attributes on the form elements. For example:\n\n```html\n\u003cinput type=\"email\" name=\"email\" id=\"email\" data-validation-engine=\"validate[required,custom[email]]\"\n\tdata-errormessage-value-missing=\"Email is required!\" \n\tdata-errormessage-custom-error=\"Let me give you a hint: someone@nowhere.com\" \n\tdata-errormessage=\"This is the fall-back error message.\"/\u003e\n```\n\nThe following attribute's value will be loaded for the relative validation rule: \n\n##### data-errormessage-value-missing\n* required\n* groupRequired\n* condRequired\n\n##### data-errormessage-type-mismatch\n* past\n* future\n* dateRange\n* dateTimeRange\n\n##### data-errormessage-pattern-mismatch\n* creditCard\n* equals\n\n##### data-errormessage-range-underflow\n* minSize\n* min\n* minCheckbox\n\n##### data-errormessage-range-overflow\n* maxSize\n* max\n* maxCheckbox\n\n##### data-errormessage-custom-error\n* custom\n* ajax\n* funcCall\n\n##### data-errormessage \n* a generic fall-back error message\n\n### Per Field Prompt Direction\n\nPrompt direction can be define using the field's **data** attribute. Here are a few examples showing how it happens:\n\n```html\n\u003cinput value=\"http://\" class=\"validate[required,custom[url]] text-input\" type=\"text\" name=\"url\" id=\"url\" data-prompt-position=\"topLeft\" /\u003e\n\u003cinput value=\"\" class=\"validate[required] text-input\" type=\"text\" name=\"req\" id=\"req\" data-prompt-position=\"bottomLeft\" /\u003e\n\u003cinput value=\"too many spaces obviously\" class=\"validate[required,custom[onlyLetterNumber]]\" type=\"text\" name=\"special\" id=\"special\" data-prompt-position=\"bottomRight\" /\u003e\n```\n\n### Prompt Position Adjustment\n\nPrompt position can be adjusted by providing shiftX and shiftY with position type in the field's **data** attribute. \nPrompt will be placed in (defaultX+shiftX),(defaultY+shiftY) position instead of default for selected position type.\nHere are a few examples showing how it happens:\n\n```html\n\u003cinput value=\"http://\" class=\"validate[required,custom[url]] text-input\" type=\"text\" name=\"url\" id=\"url\" data-prompt-position=\"topLeft:70\" /\u003e\n\u003cinput value=\"\" class=\"validate[required] text-input\" type=\"text\" name=\"req\" id=\"req\" data-prompt-position=\"bottomLeft:20,5\" /\u003e\n\u003cinput value=\"too many spaces obviously\" class=\"validate[required,custom[onlyLetterNumber]]\" type=\"text\" name=\"special\" id=\"special\" data-prompt-position=\"bottomRight:-100,3\" /\u003e\n```\n\n### Instantiation\n\nThe validator is typically instantiated with a call in the following format, the plugin can only be instanciated on form elements:\n\n```js\n$(\"#form.id\").validationEngine();\n```\n\nWithout any parameters, the init() and attach() methods are automatically called.\n\n```js\n$(\"#form.id\").validationEngine(action or options);\n```\n\nThe method may take one or several parameters, either an action (and parameters) or a list of options to customize the behavior of the engine.\n\nHere's a glimpse: say you have a form as such:\n\n```html\n\u003cform id=\"formID\" method=\"post\" action=\"submit.action\"\u003e\n    \u003cinput value=\"2010-12-01\" class=\"validate[required,custom[date]]\" type=\"text\" name=\"date\" id=\"date\" /\u003e\n\u003c/form\u003e\n```\n\nThe code below will instantiate the validation engine and attach it to the form:\n\n```html\n\u003cscript\u003e\n$(document).ready(function(){\n    $(\"#formID\").validationEngine();\n   });\n\u003c/script\u003e\n```\n\nWhen using options, the default behavior is to only initialize ValidationEngine, so attachment needs to be done manually.\n\n```html\n\u003cscript\u003e\n$(document).ready(function(){\n    $(\"#formID\").validationEngine('attach', {promptPosition : \"centerRight\", scroll: false});\n   });\n\u003c/script\u003e\n```\n\nAll calls to validationEngine() are chainable, so one can do the following:\n\n```js\n$(\"#formID\").validationEngine().css({border : \"2px solid #000\"});\n```\n\nActions\n---\n\n### attach\n\nAttaches jQuery.validationEngine to form.submit and field.blur events.\n\n```js\n$(\"#formID1\").validationEngine('attach');\n```\n\n### detach\n\nUnregisters any bindings that may point to jQuery.validaitonEngine.\n\n```js\n$(\"#formID1\").validationEngine('detach');\n```\n\n### validate\n\nValidates a form or field, displays error prompts accordingly.  \nReturns *true* if the form validates, *false* if it contains errors.\n\nFor *fields*, it returns false on validate and true on errors.\n\nWhen using form validation with ajax, it returns *undefined* , the result is delivered asynchronously via function *options.onAjaxFormComplete*.\n\n```js\n// form validation\nalert( $(\"#formID1\").validationEngine('validate') );\n\n// field validation\nalert( $(\"#emailInput\").validationEngine('validate') );\n```\n\n### showPrompt (promptText, type, promptPosition, showArrow)\n\nDisplays a prompt on a given element. Note that the prompt can be displayed on any element by providing an id.\n\nThe method takes four parameters: \n1. the text of the prompt itself\n2. a type which defines the visual look of the prompt: 'pass' (green), 'load' (black) anything else (red)\n3. an optional position: either \"topLeft\", \"topRight\", \"bottomLeft\", \"centerRight\", \"bottomRight\". Defaults to *\"topRight\"*\n4. an optional boolean which indicates if the prompt should display a directional arrow\n\n```html\n\u003cfieldset\u003e\n   \u003clegend id=\"legendid\"\u003eEmail\u003c/legend\u003e\n   \u003ca href=\"#\" onclick=\"$('#legendid').validationEngine('showPrompt', 'This a custom msg', 'load')\"\u003eShow prompt\u003c/a\u003e\n\u003c/fieldset\u003e\n```\n\n### hide\n\nThe hide method can be applied to a form or a field.  \nIt closes/hides error prompts.\n\n```js\n// closes all form prompts\n$('#formID1').validationEngine('hide');\n\n// closes onle one prompt\n$('#email1').validationEngine('hide');\n```\n\n### hideAll\n\nCloses/hides **all** error prompts on the page no matter what form they are attached to.\n\n```js\n$('#formID1').validationEngine('hideAll');\n```\n\n### updatePromptsPosition\n\nUpdate the form prompts positions.\n\n```js\n$(\"#formID\").validationEngine(\"updatePromptsPosition\")    \n```\n\n\n### hidePrompt \u0026 validateField\n\nDeprecated and not part of the code base anymore.  \nUse _hide_ and _validate_ instead.\n\n\nOptions\n---\n\nOptions are typically passed to the init or attach action as a parameter.\n\n```js\n    $(\"#formID1\").validationEngine({promptPosition : \"centerRight\", scroll: false});\n    $(\"#formID1\").validationEngine('attach', {promptPosition : \"centerRight\", scroll: false});\n```\n\n### validationEventTrigger\nName of the event triggering field validation, defaults to *blur*.\n                \n### scroll\nDetermines if we should scroll the page to the first error, defaults to *true*.\n\n### binded\nIf set to false, it removes blur events and only validates on submit.\n\n### promptPosition\nWhere should the prompt show? Possible values are \"topLeft\", \"topRight\", \"bottomLeft\", \"centerRight\", \"bottomRight\". Defaults to *\"topRight\"*.\nDefault position adjustment could also be provided.\n\n### showOneMessage\nOnly display the first incorrect validation message instead of normally stacking it. It will follows the validation hierarchy you used in the input and only show the first error.\n\n### ajaxFormValidation\nIf set to true, turns Ajax form validation logic on. Defaults to *false*.\nForm validation takes place when the validate() action is called or when the form is submitted.\n\n### ajaxFormValidationURL\nIf set, the ajax submit validation will use this url instead of the form action\n\n### ajaxFormValidationMethod\nHTTP method used for ajax validation, defaults to 'get', can be set to 'post'\n\n### onBeforeAjaxFormValidation(form, options)\nWhen ajaxFormValidation is turned on, this is the function that will be called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation\n\n### onAjaxFormComplete: function(status, form, errors, options)\nWhen ajaxFormValidation is turned on, this function is used to asynchronously process the result of the validation. the status is a boolean. If true, the ajax call completed and all the server side form validations passed. \n\n### onValidationComplete\n\nWhen defined, it stops by default the form from auto-submitting, and lets you handle the validation status via a function. You can also return true in this function and the form will be allowed to submit.\n```js\njQuery(\"#formID2\").validationEngine('attach', {\n  onValidationComplete: function(form, status){\n    alert(\"The form status is: \" +status+\", it will never submit\");\n  }  \n});\n```\n\n### custom_error_messages\n\nThis is where custom messages for IDs, Classes, or validation types are stored.\n\nCustom error messages are exclusive from one another.ID messages will be displayed instead of anything else;\nClass messages will only be used if there is no ID message, and only the first message found associated\nwith one of the classes will be used; Global Validator messages will only be used if there are no Class\nmessages or ID messages.\n\nThese custom messages are declared in this manner:\n```js\njQuery(\"#formID2\").validationEngine({'custom_error_messages' : {\n\t\t'#someId' : {\n\t\t\t'required': {\n\t\t\t\t'message': \"This is a custom message that is only attached to the input with id 'someId' if it\n\t\t\t\t\t\t\thas the validation of 'required'. This will always display, even if it has other\n\t\t\t\t\t\t\tcustom messages.\"\n\t\t\t},\n\t\t\t'custom[min]': {\n\t\t\t\t'message': \"This is a custom message that is only attached to the input with id 'someID' if it\n\t\t\t\t\t\t\thas the validation of 'custom[min[someNumber]]'. This will always display, even if\n\t\t      \t\t\t\tit has other custom messages.\"\n\t\t\t}\n\t\t},\n\t\t'.someClass': {\n\t\t\t'equals': {\n\t\t\t\t'message': \"This is a custom message that is only attached to inputs that have the class of\n\t\t\t\t\t\t\t'someClass' and the validation type of 'equals'. This will be displayed only on\n\t\t\t\t\t\t\tinputs without an ID message.\"\n\t\t\t}\n\t\t},\n\t\t'required' {\n\t\t\t'message': \"This is a custom message that replaces the normal error message for the validation\n\t\t\t\t\t\t'required'. This only displays when there are no Class or ID messages.\"\n\t\t}\n\t}\n});\n```\n\n\n### focusFirstField\n\nSpecifies whether or not the first field in a form receives auto-focus after validation returns false.  Default is set to *true*.\nIf you want to disable the auto-focusing use:\n```js\n$('#form').validationEngine('attach', {focusFirstField : false});\n```\n\n\n\n### onSuccess\nIf set, this callback function will be called when all validations passed.\n\n### onFailure\nIf set, this callback function will be called when it found an error.\n\n### autoPositionUpdate\nAuto update prompt position after window resize, disabled by default\n\n### autoHidePrompt\nDetermines if the prompt should hide itself automatically after a set period. Defaults to *false*. \n\n### autoHideDelay\nSets the number of ms that the prompt should appear for if autoHidePrompt is set to *true*. Defaults to *10000*. \n\n### showArrow\nShow the arrow in the validation popup. Defaults to *true*\n\n### showArrowOnRadioAndCheckbox\nShow the arrow in the validation popup when validating checkboxes and radio buttons. Defaults to *false*\n\nValidators\n---\n\nValidators are encoded in the field's class attribute, as follows\n\n### required\n\nSpeaks for itself, fails if the element has no value. This validator can apply to pretty much any kind of input field.\n\n```html\n\u003cinput value=\"\" class=\"validate[required]\" type=\"text\" name=\"email\" id=\"email\" /\u003e\n\u003cinput class=\"validate[required]\" type=\"checkbox\" id=\"agree\" name=\"agree\"/\u003e\n\n\u003cselect name=\"sport\" class=\"validate[required]\" id=\"sport\"\u003e\n   \u003coption value=\"\"\u003eChoose a sport\u003c/option\u003e\n   \u003coption value=\"option1\"\u003eTennis\u003c/option\u003e\n   \u003coption value=\"option2\"\u003eFootball\u003c/option\u003e\n   \u003coption value=\"option3\"\u003eGolf\u003c/option\u003e\n\u003c/select\u003e\n```\n\n### groupRequired\n\nAt least one of the field of the group must be filled. It needs to be given a group name that is unique across the form.\n\n```html\n\u003cinput value=\"\" class=\"validate[groupRequired[payments]]\" type=\"text\" name=\"creditcard\" id=\"creditcard\" /\u003e\n\u003cinput class=\"validate[groupRequired[payments]]\" type=\"text\" id=\"paypal\" name=\"paypal\"/\u003e\n```\n\n### condRequired\n\nThis makes the field required, but only if any of the referred fields has a value.\n\n```html\n\u003cinput value=\"\" type=\"text\" name=\"creditcard\" id=\"creditcard\" /\u003e\n\u003cinput class=\"validate[condRequired[creditcard]]\" type=\"text\" id=\"ccv\" name=\"ccv\"/\u003e\n```\n\n### custom[regex_name]\n\nValidates the element's value to a predefined list of regular expressions.\n\n```html\n\u003cinput value=\"someone@nowhere.com\" class=\"validate[required,custom[email]]\" type=\"text\" name=\"email\" id=\"email\" /\u003e\n```\n\nPlease refer to the section *Custom Regex* for a list of available regular expressions.\n\n\n### custom[function_name]\n\nValidates the element's value to a predefined function included in the language file (compared to funcCall that can be anywhere in your application),\n\n```html\n\u003cinput value=\"someone@nowhere.com\" class=\"validate[required,custom[requiredInFunction]]\" type=\"text\" name=\"email\" id=\"email\" /\u003e\n```\n\nPlease refer to the section *Custom Regex* for a list of available regular expressions.\n\n### funcCall[methodName]\n\nValidates a field using a third party function call. If a validation error occurs, the function must return an error message that will automatically show in the error prompt.\n\n```js\nfunction checkHELLO(field, rules, i, options){\n  if (field.val() != \"HELLO\") {\n     // this allows the use of i18 for the error msgs\n     return options.allrules.validate2fields.alertText;\n  }\n}\n```\n\nThe following declaration will do\n\n```html          \n\u003cinput value=\"\" class=\"validate[required,funcCall[checkHELLO]]\" type=\"text\" id=\"lastname\" name=\"lastname\" /\u003e\n```\n \n### ajax[selector]\n\nDelegates the validation to a server URL using an asynchronous Ajax request. The selector is used to identify a block of properties in the translation file, take the following for example.\n\n** The validation execution order is taken form the order you put them in the HTML, it is recommended to always put the ajax[] validation last. For example, the custom events might fail if you put ajax[] in the middle. Ajax[] works on submit since 2.6.\n\n```html\n\u003cinput value=\"\" class=\"validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input\" type=\"text\" name=\"user\" id=\"user\" /\u003e\n```          \n```js\n\"ajaxUserCall\": {\n    \"url\": \"ajaxValidateFieldUser\",\n    \"extraData\": \"name=eric\",\n    \"extraDataDynamic\": ['#user_id', '#user_email'],\n    \"alertText\": \"* This user is already taken\",\n    \"alertTextOk\": \"All good!\",\n    \"alertTextLoad\": \"* Validating, please wait\"\n},\n```\n\n* url - is the remote restful service to call\n* extraData - optional parameters to send\n* extraDataDynamic - optional DOM id's that should have their values sent as parameters\n* alertText - error prompt message if validation fails\n* alertTextOk - optional prompt if validation succeeds (shows green)\n* alertTextLoad - message displayed while the validation is being performed\n\nThis validator is explained in further details in the Ajax section.\n\n### equals[field.id]\n\nChecks if the current field's value equals the value of the specified field.\n\n### min[float]\n\nValidates when the field's value is less than, or equal to, the given parameter.\n\n### max[float]\n\nValidates when the field's value is more than, or equal to, the given parameter.\n\n### minSize[integer]\n\nValidates if the element content size (in characters) is more than, or equal to, the given *integer*. integer \u003c= input.value.length\n\n### maxSize[integer]\n\nValidates if the element content size (in characters) is less than, or equal to, the given *integer*. input.value.length \u003c= integer\n\n### past[NOW, a date or another element's name]\n\nChecks if the element's value (which is implicitly a date) is earlier than the given *date*. When \"NOW\" is used as a parameter, the date will be calculate in the browser. When a \"#field name\" is used ( The '#' is optional ), it will compare the element's value with another element's value within the same form. Note that this may be different from the server date. Dates use the ISO format YYYY-MM-DD\n\n```html\n\u003cinput value=\"\" class=\"validate[required,custom[date],past[now]]\" type=\"text\" id=\"birthdate\" name=\"birthdate\" /\u003e\n\u003cinput value=\"\" class=\"validate[required,custom[date],past[2010-01-01]]\" type=\"text\" id=\"appointment\" name=\"appointment\" /\u003e\n\u003cinput value=\"\" class=\"validate[required,custom[date],past[#appointment]]\" type=\"text\" id=\"restaurant\" name=\"restaurant\" /\u003e\n\u003cinput value=\"\" class=\"validate[required,custom[date],past[appointment]]\" type=\"text\" id=\"restaurant_2\" name=\"restaurant_2\" /\u003e\n```\n\n### future[NOW, a date or another element's name]\n\nChecks if the element's value (which is implicitly a date) is greater than the given *date*. When \"NOW\" is used as a parameter, the date will be calculate in the browser. When a \"#field name\" is used ( The '#' is optional ), it will compare the element's value with another element's value within the same form. Note that this may be different from the server date. Dates use the ISO format YYYY-MM-DD\n\n```html\n\u003cinput value=\"\" class=\"validate[required,custom[date],future[now]]\" type=\"text\" id=\"appointment\" name=\"appointment\" /\u003e\n\u003cinput value=\"\" class=\"validate[required,custom[date],future[#appointment]]\" type=\"text\" id=\"restaurant\" name=\"restaurant\" /\u003e\n// a date in 2009\n\u003cinput value=\"\" class=\"validate[required,custom[date],future[2009-01-01],past[2009-12-31]]\" type=\"text\" id=\"d1\" name=\"d1\" /\u003e\n```\n\n\n### minCheckbox[integer]\n\nValidates when a minimum of *integer* checkboxes are selected.\nThe validator uses a special naming convention to identify the checkboxes as part of a group.\n\nThe following example, enforces a minimum of two selected checkboxes\n\n```html\n\u003cinput class=\"validate[minCheckbox[2]]\" type=\"checkbox\" name=\"group1\" id=\"maxcheck1\" value=\"5\"/\u003e\n\u003cinput class=\"validate[minCheckbox[2]]\" type=\"checkbox\" name=\"group1\" id=\"maxcheck2\" value=\"3\"/\u003e\n\u003cinput class=\"validate[minCheckbox[2]]\" type=\"checkbox\" name=\"group1\" id=\"maxcheck3\" value=\"9\"/\u003e\n```\n\nNote how the input.name is identical across the fields. \n\n### maxCheckbox[integer]\n\nSame as above but limits the maximum number of selected check boxes.\n\n### creditCard\n\nValidates that a credit card number is at least theoretically valid, according the to the [Luhn checksum algorithm](http://en.wikipedia.org/wiki/Luhn_algorithm), but not whether the specific card number is active with a bank, etc. \n\nSelectors\n---\n\nWe've introduced the notion of selectors without giving many details about them: A selector is a string which is used as a key to match properties in the translation files.\nTake the following example:\n\n```js\n\"onlyNumber\": {\n    \"regex\": /^[0-9\\ ]+$/,\n    \"alertText\": \"* Numbers only\"\n},\n\"ajaxUserCall\": {\n    \"url\": \"ajaxValidateFieldUser\",\n    \"extraData\": \"name=eric\",\n    \"alertText\": \"* This user is already taken\",\n    \"alertTextOk\": \" * User is valid\",\n    \"alertTextLoad\": \"* Validating, please wait\"\n},\n\"validate2fields\": {\n    \"alertText\": \"* Please input HELLO\"\n}\n```\n\nonlyNumber, onlyLetter and validate2fields are all selectors. jQuery.validationEngine comes with a standard set but you are welcome to add you own to define AJAX backend services, error messages and/or new regular expressions.\n\n\nThe ValidationEngine with a datepicker\n---\nUsing a datepicker with the engine is problematic because the validation is bound to the blur event. since we lose the focus before any data is entered in the field it creates a weird bug.\nFortunately we implemented a fix that uses a delay during the datepicker binding.\n\nTo use this mode you need to add the class *datepicker* to your input, like this:\n\n```html\n\u003cinput type=\"text\" id=\"req\" name=\"req\" class=\"validate[required] text-input datepicker\" value=\"\"\u003e\n```\n\nAjax Protocol\n---\n\nThe ajax validator takes a selector as an attribute. the selector points to a structure that defines the URL to call, the different messages to display and any extra parameters to add on the URL (when applicable). Please refer to the **ajax[selector]** description for more details.\n\nAjax validation comes in two flavors:\n\n1. Field Ajax validations, which take place when the user inputs a value in a field and moves away.\n2. Form Ajax validation, which takes place when the form is submitted or when the validate() action is called.\n\nBoth options are optional.\n\n```html\n\u003cinput value=\"\" class=\"validate[required,ajax[ajaxUserCall]] text-input\" type=\"text\" name=\"user\" id=\"user\" /\u003e\n```\n\nYou can see a tutorial that makes the use of php here: [http://www.position-absolute.com/articles/using-form-ajax-validation-with-the-jquery-validation-engine-plugin/](http://www.position-absolute.com/articles/using-form-ajax-validation-with-the-jquery-validation-engine-plugin/)\n\n### Field ajax validation\n\n\n#### Protocol\n\nThe client sends the fieldId and the fieldValue as a GET request to the server url.\n\n    Client calls url?fieldId=id1\u0026fieldValue=value1 ==\u003e Server\n\nServer responds with an array: [fieldid, status, errorMsg].\n\n    Client receives \u003c== [\"id1\", boolean, errorMsg] Server\n\n* fieldid is the name (id) of the field\n* status is the result of the validation, true if it passes, false if it fails\n* errorMsg is an optional error string (or a selector) to the prompt text. If no error msg is returned, the prompt message is expected to be part of the rule with key \"alertText\" or \"alertTextOk\" (see the structure of the translation file)\n\n\n### Form ajax validation\n\n\n#### Protocol\n\nThe client sends the form fields and values as a GET request to the form.action url.\n\n    Client calls url?fieldId=id1\u0026fieldValue=value1\u0026...etc ==\u003e Server (form.action)\n\nServer responds with an *array of arrays*: [fieldid, status, errorMsg].\n\n* fieldid is the name (id) of the field\n* status is the result of the validation, true if it passes, false if it fails\n* errorMsg is an error string (or a selector) to the prompt text\n\n    Client receives \u003c== [[\"id1\", boolean,\"errorMsg\"],[\"id2\", false, \"there is an error \"],[\"id3\", true, \"this field is good\"]]\n\nNote that normally errors (status=false) are returned from the server. However you may also decide to return an entry with a status=true in which case the errorMsg will show as a green prompt.\n\n#### Validation URL\nBy default the engine use the form action to validate the form, you can however set a default url using:\n\n**ajaxFormValidationURL\n\n\n#### Callbacks\n\nSince the form validation is asynchronously delegated to the form action, we provide two callback methods:\n\n**onBeforeAjaxFormValidation(form, options)** is called before the ajax form validation call, it may return false to stop the request\n\n**onAjaxFormComplete: function(form, status, json_response_from_server, options)** is called after the ajax form validation call\n\nCustom Regex\n---\n\njQuery.validationEngine comes with a lot of predefined expressions. Regex validation rules are specified as follows:\n\n```html    \n\u003cinput value=\"\" class=\"validate[custom[email]]\" type=\"text\" name=\"email\" id=\"email\" /\u003e\n```\n    \nNote that the selector identifies a given regular expression in the translation file, but also its associated error prompt messages and optional green prompt message.    \n\n### phone\n\na typical phone number with an optional country code and extension. Note that the validation is **relaxed**, please add extra validations for your specific country.\n\n    49-4312 / 777 777\n    +1 (305) 613-0958 x101\n    (305) 613 09 58 ext 101\n    3056130958\n    +33 1 47 37 62 24 extension 3\n    (016977) 1234\n    04312 - 777 777\n    91-12345-12345\n    +58 295416 7216\n\n### url\n\nMatches a URL such as http://myserver.com, https://www.crionics.com or ftp://myserver.ws\n\n### email\n\nEasy, an email : username@hostname.com\n\n### date\n\nAn ISO date, YYYY-MM-DD\n\n### number\n\nFloating points with an optional sign. ie. -143.22 or .77 but also +234,23\n\n### integer\n\nIntegers with an optional sign. ie. -635 +2201 738\n\n### ipv4 and ipv6\n\nAn IP address (v4) ie. 127.0.0.1 or v6 2001:0db8:85a3:08d3:1319:8a2e:0370:7344\n\n### onlyNumberSp\n\nOnly numbers and spaces characters\n\n### onlyLetterSp\n\nOnly letters and space characters\n\n### onlyLetterNumber\n\nOnly letters and numbers, no space \n\n\nPosition fixed and overflow scroll\n---\nBefore 2.5.3 some options were needed to use the engine in a div with overflow scroll or position fixed, now you just have to set position relative on the form and you are good to go.\n\n\nPlaceholders\n---\nThe engine support by default placeholders  when a field is required. use the attribute data-validation-placeholder in the input to define it.\n\n   \u003cinput value=\"This is a placeholder\" data-validation-placeholder=\"This is a placeholder\" class=\"validate[required] text-input\" type=\"text\" name=\"reqplaceholder\" id=\"reqplaceholder\" /\u003e\n\n\nHooks\n---\n\nThe plugin provides some hooks using jQuery bind functionality.\n\n* jqv.form.validating : Trigger when the form is submitted and before it starts the validation process\n* jqv.field.result(event, field, errorFound, prompText) : Triggers when a field is validated with the result.\n* jqv.form.result(event, errorFound) : Triggers when a form is validated with the result\n\nAn example of binding a custom function to these events would be:\n\n```js\n$(\"#formID\").bind(\"jqv.form.result\", function(event, errorFound) {\n  if(errorFound)\n     alert(\"There is a problem with your form\");\n});\n```\n\n\nCustomizations\n---\n\nWhat would a good library be without customization?\n\n### Adding regular expressions\n\nAdding new regular expressions is easy: open your translation file and add a new entry to the list\n\n```js\n\"onlyLetter\": {\n    \"regex\": /^[a-zA-Z\\ \\']+$/,\n    \"alertText\": \"* Letters only\"\n},\n```\n\n* \"onlyLetter\" is a sample selector name\n* \"regex\" is a javascript regular expression\n* \"alertText\" is the message to display when the validation fails\n\nYou can now use the new regular expression as such\n\n```html\n\u003cinput type=\"text\" id=\"myid\" name=\"myid\" class=\"validation[custom[onlyLetter]]\"/\u003e\n```\n\nDon't forget to contribute!\n\n### Customizing the look and feel\n\nEdit the file *validationEngine.jquery.css* and customize the stylesheet to your liking. it's trivial if you know CSS.\n\n### Adding more locales\n\nYou can easily add a locale by taking *jquery.validationEngine-en.js* as an example. \nFeel free to share the translation ;-)\n\n### Changing defaults options globally\n\nYou can, for example, disable the scrolling globally by using $.validationEngine.defaults.scroll = false.\n\nThis need to be added before the initialization, one good way to handle this would be to add your settings in a file.\n\n```html\n\u003cscript src=\"js/jquery.validationEngine-en.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jquery.validationEngine.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/jquery.validationEngine-settings.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e\n```\n\nUsing the validationEngine with modal \u0026 dialog plugins\n---\nYou can have more information about implementing the engine with modal views here:\n[http://www.position-absolute.com/articles/using-the-jquery-validation-engine-with-modal-plugins/]\n\n\nRules of thumb\n---\n\n* field.id is **unique** across the page\n* From 2.2.4 and up, jquery 1.6+ is required because of prop()\n* for simplicity and consistency field.id and field.name should match (except with minCheckbox and maxCheckbox validators)\n* spaces or special chars should be avoided in field.id or field.name\n* use lower case for input.type  ie. *text, password, textarea, checkbox, radio*\n* validators are evaluated from left to right, use the Ajax validator last e.g. validate[custom[onlyLetter],length[0,100],**ajax[ajaxNameCall]**]\n* please use only one Ajax validator per field!\n* JSON services should live on the same server (or you will get into browser security issues)\n* in a perfect RESTful world, http **GET** is used to *READ* data, http **POST** is used to *WRITE* data: which translates into -\u003e Ajax validations should use GET, the actual form post should use a POST request.\n\nContribution\n---\nContributions are always welcome, please follow these steps to submit your changes:\n\n1. Install git from [http://git-scm.com/](http://git-scm.com/)\n2. Create a github account on [https://github.com](https://github.com)\n3. Set up your git ssh key using these instructions [http://help.github.com/set-up-git-redirect](http://help.github.com/set-up-git-redirect)\n4. Open the jQuery Validation Engine project home page on github on [https://github.com/posabsolute/jQuery-Validation-Engine](https://github.com/posabsolute/jQuery-Validation-Engine)\n5. Click the \"Fork\" button, this will get you to a new page: your own copy of the code.\n6. Copy the SSH URL at the top of the page and clone the repository on your local machine\n\n    ```shell\n    git clone git@github.com:your-username/jQuery-Validation-Engine.git my-jqv-repo\n    ```\n\n7. Create a branch and switch to it\n\n    ```shell\n    cd my-jqv-repo\n    git branch mynewfeature-patch\n    git checkout mynewfeature-patch\n    ```\n\n8. Apply your changes, then commit using a meaningful comment, that's the comment everybody will see!\n\n    ```shell\n    git add .\n    git commit -m \"Fixing issue 157, blablabla\"\n    ```\n\n9. Push the changes back to github (under a different branch, here myfeature-patch)\n\n    ```shell\n    git push origin mynewfeature-patch\n    ```\n\n10. Open your forked repository on github at https://github.com/your-username/jQuery-Validation-Engine\n11. Click \"Switch Branches\" and select your branch (mynewfeature-patch)\n12. Click \"Pull Request\"\n13. Submit your pull request to JQV Developers\n\n\nSupport\n---\nWe offer limited support on [http://www.stackoverflow.com/](http://www.stackoverflow.com/)\n\nUse the tag jQuery-Validation-Engine\n\nLicense\n---\nLicensed under the MIT License\n\n\nAuthors\n---\n\n Copyright(c) 2011 [Cedric Dugas](https://github.com/posabsolute) [http://www.position-absolute.com](http://www.position-absolute.com)\n \n v2.0 Rewrite by [Olivier Refalo](https://github.com/orefalo) [http://www.crionics.com](http://www.crionics.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2FjQuery-Validation-Engine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposabsolute%2FjQuery-Validation-Engine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposabsolute%2FjQuery-Validation-Engine/lists"}