Author: | sha256 |
---|---|
Views Total: | 6,387 views |
Official Page: | Go to website |
Last Update: | August 19, 2020 |
License: | MIT |
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