Create Custom Javascript Validation Popup | Code Factory
Reference Link : Link
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
- 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)
}
},