Create Custom Javascript Validation Popup | Code Factory


Donate : Link

Medium Blog : Link

Applications : 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
  • 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)
     }
},

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s