input-validator

Lightweight validator for input control.

If you only use core.js. You will see different notification on different browser.

Chrome	Firefox	IE

Test this core feature online.

Features

• setDefaultMessages to set messages for patternMismatch, valueMissing and so on. Try this online.

  HTMLInputValidatorElement.setDefaultMessages({
    valueMissing: 'Sorry, you have to input this. by default message~'
  })

• registerType to register your custom type. Try this online.

  <form>
    <input type='OneORZero'>
  </form>
  <script>
    HTMLInputValidatorElement.registerType('OneORZero', function (value) {
      if (value === '0' || value === '1') return '';
      return 'Please input 0 or 1.';
    });
  </script>

• title Set title to show custom message. Try this online.

  <form>
    <input name="key" required title='This field is required! by title~'>
  </form>

Events

This is an enhancement feature (not W3C). Because native invalid event can't bubbles to parents.

• input-valid if an input set a valid value.
• input-invalid if an input set a invalid value.

Submit

This is an enhancement feature (not W3C).

Browser won't check validity if you call native submit by js. We hook the native submit to check validity. So you can submit form by input, button or submit().

<form>
  <input name='key'>
  <input type='submit'>
  <button>button</button>
  <a href="javascript:;" onclick='this.parentNode.submit()'>submit()</a>
</form>

Browser Compatibility

• checkValidity IE 10+

Third Party

• form-json This library works well with form-json. Try this online.

  <form enctype="application/form-json">
    <input name='name' required title='you have to input this field ~'>
    <input type='submit' />
  </form>

Read More

• constraintvalidation on html5rocks
• Form_validation on MDN