HTML5 Validity Based Form Validation Plugin - jQuery validity.js

HTML5 Validity Based Form Validation Plugin - jQuery validity.js
File Size: 6.87 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="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"
>

Change log:

2018-04-13

  • JS update

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