Accessible Client Side Form Validation Plugin - jQuery aria-validate

aria-validate is a simple, accessible, client side form field validation plugin for jQuery that uses Aria attributes and roles for keyboard and screen reader accessibility.

Install it via NPM

# NPM
$ npm install aria-valdiate --save

How to use it:

1. Include the JavaScript file aria-validate.js after jQuery library and the aria-validate is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="aria-validate.js"></script>

2. Enable the plugin on the target form fields and define your own validation behaviors as follows:

<div class="field-group" id="date">
  <label class="field-group__label" for="date-field">Date</label>
  <input type="text" class="field-group__field" id="date-field" name="date-field" placeholder="dd/mm/yyyy" />
  <div class="field-group__alertbox">
  </div>
  <div class="field-group__successbox">
  </div>
</div>

// date input
$('#date').ariaValidate({
  behaviour: [{
      event: 'input',
      autoformat: {
        trim: true,
        replace: [{
            searchFor: /[-]/g,
            replaceWith: '/',
          },
          {
            searchFor: /[.]/g,
            replaceWith: '/',
          },
        ],
      },
      validate: {
        digits: true
      }
    },
    {
      event: 'blur',
      main: true,
      autoformat: {
        replace: [{
            searchFor: /[-]/g,
            replaceWith: '/',
          },
          {
            searchFor: /[.]/g,
            replaceWith: '/',
          },

        ],
        autocompleteDate: '20'
      },
      validate: {
        required: true,
        date: true,

      }
    }
  ],
});

---

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