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.