Custom HTML5 Form Validator – native-validations

Category: Form , Javascript | February 1, 2018
Author: asimism
Views Total: 800
Official Page: Go to website
Last Update: February 1, 2018
License: MIT

Preview:

Custom HTML5 Form Validator – native-validations

Description:

native-validations is a JavaScript library to enhance and replace the native HTML5 form validation with custom styles and error messages.

How to use it:

Download and import the native-validations library into the document.

<script src="form-validation.js"></script>

Add custom error message to the form fields using the following data attributes:

<input type="email"
       data-require-error="Email is required" 
       data-pattern-error="Invalid email format" 
       required>

<select multiple
        data-require-error="Select atleast 1 option from the list" 
        required>
    <option value="">Please select atleast one option</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
</select>

...

Initialize the library to Validate the form on type or submit.

document.getElementById('myForm').validateForm();

You Might Be Interested In:

Leave a Reply