Powerful jQuery Form Validation Plugin - Validation Engine

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.