Custom Basic Form Validator/Checker in jQuery | inputfollow.js

Inputfollow.js is a simple and basic client-side form validator that supports required fields, email addresses, and logical AND / OR / IF operations.

All validation rules and JavaScript error messages can be customized during init without having to rewrite your HTML form.

Validate

  • Require
  • E-mail

Limit

  • Number
  • Code

How to make use of it:

1. Download the plugin and import the thumbnail version of the inputfollow.js library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.inputfollow.js"></script>

2. Configure the plug-in in the current HTML form and customize validation rules and error messages as follows.

<form role="form" action="" method="get">
  <dl>
    <dt>Name <span class="caution">*</span></dt>
    <dd><input type="text" name="name" class="full" placeholder="Enter Name"></dd>
    <dt>E-mail <span class="caution">*</span></dt>
    <dd><input type="email" name="email" class="full" placeholder="Enter E-mail"></dd>
    <dt>Input Number</dt>
    <dd><input type="text" name="number" class="full" placeholder="Enter Number ( Limit Number )"></dd>
    <dt>Textarea Required <span class="caution">*</span></dt>
    <dd><textarea name="textarea" rows="3" class="full"></textarea></dd>
    <dt>Other Input</dt>
    <dd><input type="text" name="other" class="full" placeholder=""></dd>
    <dt>Input "or required" 01 <span class="caution">*</span></dt>
    <dd><input type="text" name="orreq01" class="full" placeholder=""></dd>
    <dt>Input "or required" 02 <span class="caution">*</span></dt>
    <dd><input type="text" name="orreq02" class="full" placeholder=""></dd>
    <dt>Input "and required" 01 <span class="caution">*</span></dt>
    <dd><input type="text" name="andreq01" class="full" placeholder=""></dd>
    <dt>Input "and required" 02 <span class="caution">*</span></dt>
    <dd><input type="text" name="andreq02" class="full" placeholder=""></dd>
    <dt>Check boxes <span class="caution">*</span></dt>
    <dd>
       <label><input type="checkbox" name="checkbox[]"> Checkbox01</label>
       <label><input type="checkbox" name="checkbox[]"> Checkbox01</label>
       <label><input type="checkbox" name="checkbox[]"> Checkbox01</label>
       <br><span class="inputfollow-error" data-target="checkbox"></span>
    </dd>
    <dt>If condition</dt>
    <dd>
       <label><input type="checkbox" name="if_from" value="checked"> If check this</label>
       <input type="text" name="if_target" class="full" placeholder="This input area will be required">
    </dd>
  </dl>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

3. Customize error / invalid categories added to form fields.

var validate = target.inputfollow({
    error_class: 'error',
    valid_class: 'valid'
})

4. Determine if all errors are shown in init.

var validate = target.inputfollow({
    initial_error_view: true
})

5. Callback functions.

var validate = target.inputfollow({
    on_validate: function(){}
    on_success: function(){}
    on_error: function(){}
})

Basic Custom Form Validator, jquery inputfollow js Plugin/Github


See Demo And Download

Official Website(sushat4692): Click Here

This superior jQuery/javascript plugin is developed by sushat4692. For extra Advanced Usage, please go to the official website.

Share