Simplest HTML5 Form Validation Plugin - jQuery Simple Validator

This is a super simple and lightweight jQuery plugin to provide client-side form validation without writing any JavaScript codes. With custom error messages and based on the native HTML5 data validation types and attributes. The plugin also has the ability to jump to the invalid form field when you click the submit button.

How to use it:

1. Place the minified version of the jQuery Simple Validator plugin after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery-simple-validator.min.js"></script>

2. The example CSS for the error messages & invalid form fields.

input:not([type="file"]).error,
textarea.error,
select.error {
  border: 1px solid red !important;
}

input:not([type="file"]).no-error,
textarea.no-error,
select.no-error {
  border: 1px solid green !important;
}

div.error-field {
  color: red;
  font-size: small;
}

3. Add the validate="true" attribute to your html form and done. The plugin will automatically apply the validation functionality to your form. Available validators:

• Required
• Email address
• URL
• Cell phone number
• Is matched
• Custom Regex pattern
• File type
• File size
• Is number
• Max/min values.
• Max/min length.

<form validate="true">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input maxlength="10" minlength="3" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"
      required>
  </div>
  <div class="form-group">
    <label for="exampleConfirmPassword1">Confirm Password</label>
    <input type="password" class="form-control" id="exampleConfirmPassword1" placeholder="Confirm Password" required data-match="password"
      data-match-field="#exampleInputPassword1">
  </div>
  <div class="form-group">
    <label for="exampleNumber1">Age</label>
    <input class="form-control" type="number" id="exampleNumber1" placeholder="Your age" max="100" min="10">
  </div>
  <div class="form-group">
    <label for="exampleTextarea1">Something about you</label>
    <textarea maxlength="40" minlength="10" id="exampleTextarea1" class="form-control" placeholder="Few line about you" required></textarea>
  </div>
  <div class="form-group">
    <label for="exampleInputSelect1">You are</label>
    <select class="form-control" required>
      <option value="">Select one</option>
      <option value="Student">
        Student
      </option>
      <option value="Working">
        Working
      </option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleURL1">Blog URL</label>
    <input type="url" class="form-control" id="exampleURL1" placeholder="http://www.example.com" required>
  </div>
  <div class="form-group">
    <label for="exampleMobile1">Mobile Number</label>
    <input type="mobile" class="form-control" id="exampleMobile1" placeholder="Mobile number" required>
  </div>
  <div class="form-group">
    <label for="examplePattern1">3 letter Country code</label>
    <input type="text" class="form-control" id="examplePattern1" placeholder="Ex: IND, ENG" required pattern="^[A-Za-z]{3}$">
  </div>
  <div class="form-group">
    <label for="exampleFile1">Profile Picture</label>
    <br>
    <input type="file" data-file-types="image/jpeg,image/png" id="exampleFile1" data-file-max-size="100kb" data-file-min-size="50kb"
      required>
    <p>Choose a jpeg or png image with min size of 50kb and max size of 100 kb</p>
  </div>
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox" value="true" required>I agree to the terms and conditions
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

---

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