Create Custom Javascript Validation Popup | #CodeFactory

Download js and css : Download | Demo

Preview :

Description :

An easy to use yet fully customizable form field validator built using native JavaScript with no 3rd JavaScript libraries.

Predefined validation rules :

- required
- notzero
- integer
- float
- min
- max
- between
- name
- lastname
- phone
- email
- length
- maxlength
- minlength
- maxfilesize
- fileextension

How to use it :

Import the main JavaScript file js-form-validator.min.js and css file forms.css into your html file.

<link href="css/forms.css" rel="stylesheet"> <script src="js/js-form-validator.min.js"></script>

Apply the validation rules to the target form fields using data-rule attributes. You can apply multiple rules to the same field by seperate the rules with "|".

<form action="#" id="form"> <br> Emp code : <br> <input type="text" name="emp_code" id="emp_code" data-rule="emp_code|required"> <br> <br> Emp Name : <br> <input type="text" name="emp_name" id="emp_name" data-rule="emp_name|required"> <br> <br> Custom : <br> <input type="text" name="custom" id="custom" data-rule="code_factory|required"> <br> <br> <input type="Submit"> </form>

Initialize the library and done.

new Validator(document.querySelector('#form'), function(err, res) { return res; }

Add your own validation rules and error messages :

new Validator(document.querySelector('#form'), function(err, res) { return res; }, options = { rules : { code_factory : function(value) { return (value.trim().toLowerCase() === 'codefactory'); } }, messages : { en : { code_factory : { incorrect : 'Error ;-)' } } } });

OR

Add below code in js js-form-validator.min.js.

messages: { en: { emp_code: { empty: "Please, enter Employee Code", incorrect: "Only digits allow" }, emp_name: { empty: "Please, enter Employee Name", incorrect: "Only alphabets allow" } } }, rules: { emp_code: function(a) { return (new RegExp(/^[1-9]{1,}[0-9]{0,}$/g)).test(a) }, emp_name: function(a) { return (new RegExp(/^[A-Za-z]{0,}$/g)).test(a) } },







Tags :
Minimal Form Validation Popup In Pure JavaScript – popup-validation
Customizable Form Validator With Native JavaScript – js-form-validator.js
html5 form validation custom message
Set custom validation message in HTML
trigger html5 validation without submit
jquery form validation without submit button
How to force a html5 form validation without submitting it via jQuery
Trigger standard HTML5 validation without using submit button
html5 form validation, void form action and execute jQuery when all html5 form elements are validated
HTML5 form validation without submit button with custom error message
HTML: HTML5 Form Validation Examples
HTML5, how to force input pattern validation on value change
javascript for open bubble message on blur
HTML5: Is there any way to show error bubble popup for input fields
Show HTML5 validation message
Form Validation UX in HTML and CSS
How to show HTML5 validation messages on input change
Custom Validation Messages for HTML5 Form Constraints
Creating A Custom HTML5 Form Validation