Minimal HTML5 Form Validator In Vanilla JavaScript – Pristine

Preview:

Description:

Pristine is a lightweight vanilla JavaScript form validation library which works with the native HTML5 attributes and allows you to create your own validators of course.

How to use it:

Import the minified version of the Pristine library into the document.

<script src="dist/pristine.min.js"></script>

Initialize the Pristine on the HTML5 form.

<form id="form-demo" novalidate method="post">
  <input type="hidden" />
  <div class="form-group">
    <label>required</label>
    <input type="text" required" />
  </div>
  <div class="form-group">
    <label>minlength=5, but not required</label>
    <input type="text" minlength="5"" />
  </div>
  <div class="form-group">
    <label>type=email, not required</label>
    <input type="email"" />
  </div>
  <div class="form-group">
    <label>number, not required</label>
    <input type="number"" />
  </div>
  <div class="form-group">
    <label>number, min=100, not required</label>
    <input type="number" min="100"" />
  </div>
  <div class="form-group">
    <label>number, min=100, required</label>
    <input type="number" min="100" required" />
  </div>
  <div class="form-group">
    <label>required</label>
    <select required">
      <option value="">-----</option>
      <option value="bd">Bangladesh</option>
      <option value="us">USA</option>
      <option value="ca">Canada</option>
    </select>
  </div>
  <div class="form-group inline-label">
    <p>required, min=2</p>
    <input id="ch1" type="checkbox" min="2" name="future" required data-pristine-min-message="Select at least 2" />
    <label for="ch1">Dhaka</label><br />
    <input id="ch2" type="checkbox" min="2" name="future" required data-pristine-min-message="Select at least 2" />
    <label for="ch2">Sylhet</label><br />
    <input id="ch3" type="checkbox" min="2" name="future" required data-pristine-min-message="Select at least 2" />
    <label for="ch3">Khulna</label>
  </div>
  <div class="form-group">
    <label>pattern=/^\d+\.\d{2}$/ (match decimal with 2 points), required</label>
    <input type="number" pattern="/^\d+\.\d{2}$/g" required" />
  </div>
  <div class="form-group">
    <label>above field with custom message</label>
    <input type="number" pattern="/^\d+\.\d{2}$/g" required data-pristine-pattern-message="The value must have 2 decimal points"" />
  </div>
  <div class="form-group">
    <input type="submit" value="Submit" class="btn" />
  </div>
</form>

var form = document.getElementById("form-demo");
var pristine = new Pristine(form);

Validate the form on submit.

form.addEventListener('submit', function (e) {
e.preventDefault();
var valid = pristine.validate();

Pass the following options as the second parameter to the Pristine method.

var pristine = new Pristine(form,{
    classTo: 'form-group',
    errorClass: 'has-danger',
    successClass: 'has-success',
    errorTextParent: 'form-group',
    errorTextTag: 'div',
    errorTextClass: 'text-help'
});

Determine whether to validate the form while typing. Default: true.

var pristine = new Pristine(form,{
    classTo: 'form-group',
    errorClass: 'has-danger',
    successClass: 'has-success',
    errorTextParent: 'form-group',
    errorTextTag: 'div',
    errorTextClass: 'text-help'
}, false);

Add a custom validator.

pristine.addValidator(nameOrElem, handler, errorMessage, priority, halt);

Determine whether to disable the error message.

pristine.validate(inputs, true)

Define the custom error message in the data-pristine-required-message attribute.

<input required data-pristine-required-message="Error Message"/>

More API methods.

// gets the errors
pristine.getErrors(input);
// adds a custom error
pristine.addError(input, error);
// sets options
pristine.setGlobalConfig(config);
// resets all the errors
pristine.reset();
// destroys the instance
pristine.destroy();

Changelog:

v0.1.9 (2020-08-19)

• Fix indentation in test files, bump version

v0.1.8 (2020-08-17)

• Bugfixed