Fast User-friendly Form Validation Engine - Supreme Validation

Supreme Validation is a simple, high-performance, user-friendly, open-source form validation library for jQuery.

More Features:

• Supports almost all form controls.
• Prevents form submit until all form fields are valid.
• Easy to customize the error message for each form field.
• 7 built-in custom validators: Email, Credit Card, Date, etc.

How to use it:

1. Install & download the package with NPM.

npm install supreme-validation

2. Load the core JavaScript and Stylesheet in your HTML document.

<link href="/path/to/supreme.validation.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/supreme.validation.min.js"></script>

2. Load the OPTIONAL theme CSS to style your form controls.

<link href="/path/to/supreme.validation.theme.min.css" rel="stylesheet" />

3. Add the CSS class supreme-validate-element to your form controls and customize the error messages in the error-message attribute as follows:

<form id="contact-form" action="/" method="get" autocomplete="off" class="supreme-validate">
  <div class="supreme-validate-element" error-message="Please fill in the field.">
    <label>Name:</label>
    <input type="text" placeholder="Name" name="name" />
  </div>
  <div class="supreme-validate-element" error-message="At Least 3" min-check="3">
    <label>Select the languages.</label>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="html" name="html" value="html" />
        <label for="html">Html</label>
      </li>
      <li>
        <input type="checkbox" id="css" name="css" value="css" />
        <label for="css">CSS</label>
      </li>
      <li>
        <input type="checkbox" id="js" name="js" value="js" />
        <label for="js">JS</label>
      </li>
      <li>
        <input type="checkbox" id="react" name="react" value="react" />
        <label for="react">React</label>
      </li>
    </ul>
  </div>
  <button type="submit">Submit</button>
</form>

4. Apply additional validators to the form fields. Available custom validators:

• Credit card
• Date
• Email
• Phone
• Special characters
• URL

<div class="supreme-validate-element" error-message="Please fill in your e-mail address." custom-validation="mail">
  <label>Mail:</label>
  <input type="text" placeholder="Mail" name="mail" />
</div>

5. Initialize the plugin on this form and done.

$(".supreme-validate").supremeValidation({
  // options here
});

6. Determine whether to validate form fields on keyup and or focusOut. Default: false.

$(".supreme-validate").supremeValidation({
  keyUpOption: true,
  focusOutOption: true
});

7. Determine whether to disable the Submit button when have invalid form fields. Default: false.

$(".supreme-validate").supremeValidation({
  buttonDisabled: true
});

8. Available callback function that will be fired when the form is valid or not.

$(".supreme-validate").supremeValidation({
  onSuccess: function (response) {
    console.log('success response: ', response)
  },
  onError: function (error) {
    console.log('error: ', error)
  }
});

Changelog:

v1.0.5 (01/09/2021)

• NPM development.

---

This awesome jQuery plugin is developed by supremevalidation. For more Advanced Usages, please check the demo page or visit the official website.