Tiny Form Validator With jQuery And Bootstrap - smValidator

File Size: 5.75 KB
Views Total: 3107
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny Form Validator With jQuery And Bootstrap - smValidator

smValidator is a lightweight jQuery form validator styling with Bootstrap that can be used to validate various types of input fields with custom error messages.

Built-in validation rules:

  • Min/max length
  • Is Match
  • Email address.
  • Mobile Number.
  • Count.
  • Remote Ajax Validation.
  • Not Empty.
  • Is dependent.
  • Visa card.
  • Master card.
  • Card date and month.

How to use it:

1. Include the Bootstrap's stylesheet to style the form validator.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">

2. Add validation rules to your form fields using name attribute. Available rule names:

  • stringLength
  • match
  • email
  • mobile
  • count
  • remote
  • notEmpty
  • itsDependable
  • visaCard
  • masterCard
  • cardDateMonth
<form method="post" action="/" id="smValidationForm">
  <div class="col-md-4 form-group">
      <label>User Name</label>
      <input class="form-control" type="text" name="username">
  </div>
  <div class="col-md-4 form-group">
      <label>Title</label>
      <input class="form-control" type="text" name="title">
  </div>
  <div class="col-md-4 form-group">
      <label>Email</label>
      <input class="form-control" type="email" name="email">
  </div>
  <div class="clearfix"></div>
  <div class="col-md-6 form-group">
      <label>Password</label>
      <input class="form-control" type="text" name="password">
  </div>
  <div class="col-md-6 form-group">
      <label>Confirm Password</label>
      <input class="form-control" type="text" name="confirm_password">
  </div>
  <div class="clearfix"></div>
  <div class="col-md-4 form-group">
      <label>Mobile</label>
      <input class="form-control" type="text" name="mobile">
  </div>
  <div class="col-md-12 form-group">
      <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>

3. Customize validation rules & error messages.

var rules = {
  username: {
      stringLength: {
          min: 60,
          max: 160,
          message: "The name length must be within 60 to 160."
      }
  },
  title: {
      notEmpty: {
          message: "The title is required"
      },
      stringLength: {
          min: 60,
          max: 160,
          message: "The title length must be within 60 to 160."
      }
  },
  email: {
      notEmpty: {
          message: "The email field is required"
      },
      email: {
          message: "The email must be valid!",
      }
  },
  password: {
      notEmpty: {
          message: "The password field is required"
      },
      match: {
          message: "The password and confirm password must be match!",
          field: 'confirm_password'
      }
  },
  mobile: {
      notEmpty: {
          message: "The Mobile no field is required"
      },
      mobile: {
          message: "The Mobile no must be valid!",
      }
  },
  count: {
      count: {
          type: 'checkbox', //here 2 types available like class and checkbox
          min: 2,
          massageDivId: 'your Message section id',
          message: "The count field must be greter then 2!",
      }
  },
  remoteCheck: {
      remote: {
          url: 'Your url will be here',
          type: 'get', //your ajax form method and success return must be 1 for true validation
          message: "The count field must be greter then 2!",
      }
  },
  type: {
      notEmpty: {
          message: "The package type is required"
      },
      itsDependable: {
          rules: {
              1: {
                  'pricing_detail_1[price_type]': {
                      'notEmpty': {
                          message: "The package price type is required"
                      }
                  },
              },
              2: {
                  'pricing_detail_2[basic_pricing_title]': {
                      'notEmpty': {
                          message: "The package basic price title is required"
                      }
                  },
              }
          }

      }
  }

};

4. Enable the form validator on the form.

smValidator("smValidationForm", rules);

5. Specify the validation type you prefer.

  • 1: validation your form on submit.
  • 2: returns true or false.
  • 3: ajax from submit.
smValidator("smValidationForm", rules, 1);

This awesome jQuery plugin is developed by mrksohag. For more Advanced Usages, please check the demo page or visit the official website.