How to install

Download.
Load the jQuery file (You can find this file in the src folder or use cdn).
Load validateit.js or the minified version validateit.min.js (You can find these files in the src folder).

Example

Code

HTML


   <form action="" method="post" id="simple-form">
    <h4>Simple Form</h4>
    <div class="form-field">
      <div class="form-label">
        <label>Name :</label>
      </div>
      <input name="name" data-fv-validations="required;alphabets;" data-fv-messages="Cannot be empty.; Only alphabets allowed.;" />
    </div>
    <div class="form-field">
      <div class="form-label">
        <label>Username :</label>
      </div>
      <input name="username" data-fv-validations="required;no_space;" data-fv-messages="Cannot be empty.; No space allowed.;" />
    </div>
    <div class="form-field">
      <div class="form-label">
        <label>Gender :</label>
      </div>
      <select name="gender" data-fv-validations="required;" data-fv-messages="Cannot be empty.;">
        <option value=""> Select Gender </option>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>
    </div>
    <div class="form-field">
      <div class="form-label">
        <label>Age :</label>
      </div>
      <input name="age" data-fv-validations="required;numeric;" data-fv-messages="Cannot be empty.; Only number allowed.;" />
    </div>
    <div class="form-actions">
      <input type="submit" value="Submit" class="btn" />
      <input type="reset" value="Reset" class="btn" />
    </div>
  </form>

Javascript

var simpleForm = $("#simple-form").validateIt();

Rules

Rule	Description
required	Makes a field mandatory
no_space	Fails the validation if a white space is found
lowercase	All letters must be lowercase
uppercase	All letters must be uppercase
email	Checks for a valid email address
url	Checks for a valid URL
numeric	All characters must be numbers
alphabets	All characters must be alphabets
mobilenumber	Checks for a valid phone number with a country code

Methods

.form

This is the jQuery object of the form. You can use this like any other jQuery object.

Example

                
simpleForm.form //returns the jQuery of the form same as $("#simple-form")

.reset()

This will reset the form by removing all error messages and classes from fields.

Example
Let's take the above example as reference.

                
// get the reset button and call the reset() method on the form validateIt instance.
      simpleForm.form
                .find("input[type=reset]")
                .on("click",function(){
                    simpleForm.reset();
                    return false;
                  })

.isFormValidated()
This is useful for validating your form using your javascript; especially when you want to trigger submit outside the form. It can also be used when you want to submit the form using AJAX or want to manipulate data before submitting the form. It will return true or false value for success and failure respectively. In case the form fails to validate, calling this method will automatically put the error messages next to their respective fields and it will scroll the page up to the first error message.

Example
Let's validate and submit form by clicking the button below.

HTML
```
                
  <button class="button" id="btn-to-submit-form">Validate & Submit</button>
                
              
```
Javascript
```
                
 $("#btn-to-submit-form").on("click",function(){
      if(simpleForm.isFormValidated()){  
        simpleForm.form.submit();
      }
  })
                
              
```

Creating your own rules

With ValidateIt you can create your own rules and assign error messages to them very easily. You can create as many rules as you want for a particular instance. This gives you the power to have a same rule name but it can work differently for different instances- just like polymorphism. For creating new rules, just add them to your instance's rules.

Example
Let's create a rule which checks the age. The validation should fail if the age is =< 17.

HTML


 <form action="" id="example-form" method="post" >
  <div class="input-holder">
    Age : <input type="text" data-fv-validations="numeric;check_age;" data-fv-messages="Must be a number.;Must be greater than 17.;" name="age">
  </div>
  <input type="submit" value="Submit" class="button"> 
 </form>

Javascript


  var exampleForm = $("#example-form").validateIt();

  exampleForm.rules.check_age = function(value, element){
    return (value > 18);
  }

Two parameters are passed to all custom made functions.

Name	Description
value	The value entered in the field. You can directly use this value to check if it is acceptable or not.
element	The element being checked. You can perform DOM manipulations or get the type etc.

In the above example, check_age function returns true or false depending on the input value. In HTML, we just need to specify validation name in data-fv-validations and a message in data-fv-messages. The above example will first check for numeric input and then the custom-created validation check_age.

PS : Please note that your custom created rule should always return true or false.

Overriding in-built rules

Overriding in-built rules is quite easy. Just add your rule function to the instance's rules with same name and it will be overriden.

Example
If you want to override required rule then simply do the following.