Powerful jQuery Form Validation Plugin - Validation Engine
File Size: | 707 KB |
---|---|
Views Total: | 35037 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Validation Engine is a jQuery plugin aimed at the validation of form fields in the browser. The plugin provides visually appealing prompts that grab user attention on the subject matter.
Take a look at the examples which should give a good impression of what this plugin can do and how to use it.
Basic Usage:
1. Include jQuery library in the head section of your web page.
<script src="jquery.min.js"></script>
2. Include jquery.validationEngine.js and its local file after jQuery. You can find all local files under the /js/languages/
folder.
<script src="js/jquery.validationEngine-en.js"></script> <script src="js/jquery.validationEngine.js"></script>
3. Include the validationEngine.jquery.css
on the page.
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
4. Apply validators to form fields using CSS classes or HTML data
attributes as follows:
<form id="formID" method="post" action="submit.action"> <input class="validate[required,custom[date]]" type="text" name="date" id="date" /> </form> <!-- Or --> <form id="formID" method="post" action="submit.action"> <input data-validation-engine="validate[required,custom[date]]" type="text" name="date" id="date" /> </form>
5. The plugin also supports native HTML5 validation rules. All available built-in validators:
- required
- groupRequired[groupName]
- condRequired[fieldName]
- custom[regexRule]
- custom[customFunction]
- ajax[ajaxUserCall]
- equals[field.id]
- min[float]
- max[float]
- minSize[integer]
- maxSize[integer]
- past[NOW, a date or another element's name]
- future[NOW, a date or another element's name]
- minCheckbox[integer]
- maxCheckbox[integer]
- creditCard
6. Call the plugin on the form and done.
$(document).ready(function(){ $("#form.id").validationEngine(); });
7. Customize the error messages via data-errormessage-*
attributes:
<input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]" data-errormessage-value-missing="Email is required!" data-errormessage-custom-error="Let me give you a hint: [email protected]" data-errormessage="This is the fall-back error message." />
8. All possible plugin options.
$("#formId").validationEngine('attach', { // Name of the event triggering field validation validationEventTrigger: "blur", // Automatically scroll viewport to the first error scroll: true, // Focus on the first input focusFirstField:true, // Show prompts, set to false to disable prompts showPrompts: true, // Should we attempt to validate non-visible input fields contained in the form? (Useful in cases of tabbed containers, e.g. jQuery-UI tabs) validateNonVisibleFields: false, // ignore the validation for fields with this specific class (Useful in cases of tabbed containers AND hidden fields we don't want to validate) ignoreFieldsWithClass: 'ignoreMe', // Opening box position, possible locations are: topLeft, // topRight, bottomLeft, centerRight, bottomRight, inline // inline gets inserted after the validated field or into an element specified in data-prompt-target promptPosition: "topRight", bindMethod:"bind", // internal, automatically set to true when it parse a _ajax rule inlineAjax: false, // if set to true, the form data is sent asynchronously via ajax to the form.action url (get) ajaxFormValidation: false, // The url to send the submit ajax validation (default to action) ajaxFormValidationURL: false, // HTTP method used for ajax validation ajaxFormValidationMethod: 'get', // Ajax form validation callback method: boolean onComplete(form, status, errors, options) // retuns false if the form.submit event needs to be canceled. onAjaxFormComplete: $.noop, // called right before the ajax call, may return false to cancel onBeforeAjaxFormValidation: $.noop, // Stops form from submitting and execute function assiciated with it onValidationComplete: false, // Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messages doNotShowAllErrosOnSubmit: false, // Object where you store custom messages to override the default error messages custom_error_messages:{}, // true if you want to validate the input fields on blur event binded: true, // set to true if you want to validate the input fields on blur only if the field it's not empty notEmpty: false, // set to true, when the prompt arrow needs to be displayed showArrow: true, // set to false, determines if the prompt arrow should be displayed when validating // checkboxes and radio buttons showArrowOnRadioAndCheckbox: false, // did one of the validation fail ? kept global to stop further ajax validations isError: false, // Limit how many displayed errors a field can have maxErrorsPerField: false, // Caches field validation status, typically only bad status are created. // the array is used during ajax form validation to detect issues early and prevent an expensive submit ajaxValidCache: {}, // Auto update prompt position after window resize autoPositionUpdate: false, InvalidFields: [], onFieldSuccess: false, onFieldFailure: false, onSuccess: false, onFailure: false, validateAttribute: "class", addSuccessCssClassToField: "", addFailureCssClassToField: "", // Auto-hide prompt autoHidePrompt: false, // Delay before auto-hide autoHideDelay: 10000, // Fade out duration while hiding the validations fadeDuration: 300, // Use Prettify select library prettySelect: false, // Add css class on prompt addPromptClass : "", // Custom ID uses prefix usePrefix: "", // Custom ID uses suffix useSuffix: "", // Only show one message per error prompt showOneMessage: false });
9. API methods.
// attaches the plugin to a form $("#formID").validationEngine('attach'); // detaches the plugin $("#formID").validationEngine('detach'); // validates a form and displays error prompts accordingly. // returns true or false $("#formID").validationEngine('validate'); // shows prompt $("#formID").showPrompt (promptText, type, promptPosition, showArrow); // hides errors $("#formID").validationEngine('hide'); // hides all errors $("#formID").validationEngine('hideAll'); // updates the position of prompts $("#formID").validationEngine('updatePromptsPosition');
Changelog:
v3.1.0 (2019-08-13)
- added possibility for ipv6. Use custom[ipv4] for ipv4 validation and custom[ip] for v4 and v6.
v3.0 (2019-07-19)
- ready for jquery 3+
- updated/added languages
This awesome jQuery plugin is developed by posabsolute. For more Advanced Usages, please check the demo page or visit the official website.