Custom HTML5 Form Validator – native-validations

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();