HTML5 Validity Based Form Validation Plugin - jQuery validity.js

validity.js is a small jQuery HTML5 form validation plugin used to validate the values of any form fields using the HTML validity property. You can apply custom styles to the form fields and customizie the error messages when the values are invalid.

How to use it:

1. Download and load the JavaScript file jquery.validity.js after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery.validity.js"></script>

2. Initialize the plugin on the existing html form and done.

<form class="validity" method="post" action="/">
  <!-- Form Fields Here -->
  <button type="submit">Submit</button>
</form>

$(function() {
  $('.validity').validity()
    .on('submit', function(e) {
      var $this = $(this),
          $btn = $this.find('[type="submit"]');
          $btn.button('loading');
      if (!$this.valid()) {
          e.preventDefault();
          $btn.button('reset');
      }
  });
});

3. Apply custom styles to the form fields when the form values are valid/invalid.

.your-field.error {
  border-color: red;
}

.your-field.mismatch {
  border-color: orange;
}

.your-field.valid {
  border-color: green;
}

4. Customize the error messages when the form fields are invalid.

<input id="name" name="name" class="your-field" type="text" required
       data-missing="This field is required"
>

<input id="phone" name="phone" class="your-field" pattern="\d{3}[\-]\d{3}[\-]\d{4}" type="tel" required
        data-mismatch="Please match the requested format: 999-999-9999"
>

//  or
$('.validity').validity({
  messages: {
    missing: 'Required Filed',
    mismatch: 'The value entered is invalid'
  }
})

5. Determine the form field to include & exclude.

$('.validity').validity({
  selector: ':input',
  ignore: ':hidden'
})

Changelog:

2020-03-20

• JS update

2020-01-08

• JS update

---

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