global-source / javascript_form_validator

Native Javascript (Include ES6) Library to enable HTML-5(type) validation on various browsers.

Global Source - JavaScript Form Validator [Ready to Use]

Installation

git clone https://github.com/global-source/javascript_form_validator.git
git checkout -b [VERSION]

Why me ?

• Support Native and ES6 Javascript,
• Pure Javascript Code (No Dependency),
• Simplified Implementations,
• HTML 5 validation for all Browsers,
• Reliable and Dynamic level DOM Validations,
• Dynamic auto scroll with element.

Steps to Integrate to Form :

 <script src="formValidator.js"></script>
 or
 <script src="formValidator.es6.js"></script>

Then Integrate your form with Validator.

    
    var myform = new jsValidator().init({
        form: 'form2submit',   // #id
    });
    

Options

Name	Values	Descriptions	Mandatory
form	#ID	ID of the Form to handle validations and filters.	Yes
forceFilter	Bool	True, to allow form filter without form validations. False, default.	No
message	Object	Response message for all HTML elements.	No
Log	Bool	To enable error log on console.	No

---

Actions

check() : Return as Form is Valid or Not.

// Retrun status as True|False.
 myform.check() 

update() : Update Newly created DOM elements to Validator.

 // It will update the DOM.
 myform.update() 

---

Attributes

Name	Values	Descriptions
required	True, False	Set the fields is required to submit the Form.
min	Integer	To set the Minimun value to proceed.
max	Integer	To set the Maximum value to proceed.
data-maxlength="10"	Integer	To set the Maximum length of characters to proceed.
maxLength="10"	Integer	To set the Maximum length of characters to proceed.
type="password"	AlphaNumeric	To set and compare password.
type="email"	AlphaNumeric	To check the email is valid or not.
type="file"	string ['png,jpeg..']	To check the file format is allowed or not.
data-message="Error Message"	String	User defined, element based direct error message to handle.
data-allow="onlyAlpha"	Alphabets Only	Allow only string, no digits and no special characters.
data-allow="string"	Alphabets + Numbers Only	Allow only string and digits, no special characters.
data-allowSpecial="/_+"	Special characters	Allow only given special characters.
[INDEX]	Numeric	Now supports Min&Max validation to show the limit.

Currently the validation will trigger on submit button trigger.

It has automated listener to monitor every changes on form.

Note:

1. Validation take place between tags, so need to specify the ID
   of the Form or any other tags.

   <form id="form2submit"> </form>  // Preferred
           
   <div id=form2submit> </div>      // Not-Preferred.

For General Input Validation

2. Input Fields should specify the type of validation.

   <form method="post" id="form2submit" novalidate>
    <div>
        <label>Only Alpha</label>
        <input type="text" data-allow="onlyAlpha" name="alpha"
               data-message="<b style='color:green'>This field is required.</b>" required>
    </div>
    <div>
        <label>String</label>
        <input type="text" data-allow="string" data-message="This also required." data-allowSpecial="+-" name="string"
               required>
    </div>
    <div>
        <label>Pattern</label>
        <input type="text" pattern="^[0-5]+$" data-allowSpecial="/-" name="pattern">
    </div>
    <div>
        <label>Number</label>
        <input type="number" name="number" required>
    </div>
    <div>
        <label>Min Validator</label>
        <input type="text" name="myNumber" min="5" max="10" required>
    </div>
    <div>
        <label>Email Validator</label>
        <input type="email" name="email" required>
    </div>
    <div>
         <label for="file">File</label>
         <input type="file" required class="form-control" id="file" data-extensions="png,jpeg,jpg" name="file">
    </div>
    <div>
        <label>Password</label>
        <input type="password" name="password" data-check="repassword" id="password" required>
    </div>
     <div>
        <label>Password</label>
        <input type="password" name="password" data-check="repassword" id="password" required>
    </div>
    <div>
        <label>List</label>
         <select name="list" required>
             <option value="item1">Item1</option>
             <option value="item2">Item2</option>
             <option value="item3">Item3</option>
         </select>
    </div>
    <div>
         <label>Description</label>
         <textarea required name="desc"></textarea>
    </div>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

3. In form use novalidate to avoid browser interuptions.

        <form method="POST/GET/PUT/PATCH/DELETE" action="PATH-TO-HANDLE" id="form2submit" novalidate> 
        ...
        ...
        </form>

Sample

 // For Native & ES6 Javascript.
 var myform = new jsValidator().init({
        form: 'form2submit',   // #id
        forceFilter: true,
         message: {
            required: 'This field is required !',
            min: '<br><span style="color: red;">This field is less then the limit</span>',
            max: 'This field is exceeds the limit',
            password: 'Password doesn\'t match !',
            email: 'Invalid Email found !',
            file: 'Invalid File format given'
        }
    });
    

It Will listen the Submit event Automatically and initiating the validation checks. And based on response, it will allow to submit or throw messages.

License

Copyright (c) 2016 Shankar Thiyagaraajan

MIT License