Validate Form Fields Using HTML Data Attributes - jQuery validate.js

A simple, lightweight (less than 1kb) jQuery form validation plugin that works with most commonly used input fields like username, email, number, password, and more.

How to use it:

1. Load the validate.js after jQuery library and we're ready to go.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/validate.js"></script>

2. Apply validation rules to input fields using the following HTML data attributes:

• data-require: Required field
• data-error: Custom error message
• data-display: Where to place the error message when invalid
• data-onlychar: Only allow characters
• data-email: Check if is a valid email
• data-number: Check if is a valid number
• data-long: Set the length
• data-min: Set the min value
• data-max: Set the max value
• data-match: Check if the password matches the previous one

<form id="form">
  <input
    type="text"
    id="fname"
    name="fname"
    data-require="true"
    data-error="Please enter first name"
    data-display="fname_error"
    data-onlychar='{"msg":"Only charactors are allowed"}'
  />
  <br />
  <span id="fname_error"></span>
  <br />
  <input
    type="text"
    id="lname"
    name="lname"
    data-require="true"
    data-error="Please enter last name"
    data-display="lname_error"
  />
  <br />
  <span id="lname_error"></span>
  <br />
  <input
    type="text"
    id="email"
    name="email"
    data-require="true"
    data-email='{"msg":"Please enter valid email"}'
    data-error="Please enter email"
    data-display="email_error"
  />
  <br />
  <span id="email_error"></span>
  <br />

  <input
    type="text"
    id="mobile"
    name="mobile"
    data-require="true"
    data-number='{"msg":"Please enter valid number"}'
    data-error="Please enter mobile number"
    data-long='{"len":"10","msg":"Number should be 10 charators long"}'
    data-display="mobile_error"
  />
  <br />
  <span id="mobile_error"></span>
  <br />

  <input
    type="password"
    id="pass"
    name="pass"
    data-require="true"
    data-error="Please enter password"
    data-display="pass_error"
    data-min='{"len":"6","msg":"Minimun 6 chars long"}'
    data-max='{"len":"20","msg":"Maximum 6 chars long"}'
  />
  <br />
  <span id="pass_error"></span>
  <br />

  <input
    type="password"
    id="repass"
    name="repass"
    data-require="true"
    data-error="Please re-enter password"
    data-display="repass_error"
    data-match='{"to":"pass","msg":"Password not match"}'
  />
  <br />
  <span id="repass_error"></span>
  <br />

  <input type="submit" value="Submit" />
</form>

3. Validate the form on submit.

$(document).ready(() => {
  $("#form").on("submit", (e) => {
    e.preventDefault()
    let fname = $("#fname")
    let lname = $("#lname")
    let email = $("#email")
    let mobile = $("#mobile")
    let pass = $("#pass")
    let repass = $("#repass")

    let status = 0

    if (!validate(fname)) {
        status = 0
        return false
    } else { status = 1 }

    if (!validate(lname)) {
        status = 0
        return false
    } else { status = 1 }

    if (!validate(email)) {
        status = 0
        return false
    } else { status = 1 }

    if (!validate(mobile)) {
        status = 0
        return false
    } else { status = 1 }

    if (!validate(pass)) {
        status = 0
        return false
    } else { status = 1 }

    if (!validate(repass)) {
        status = 0
        return false
    } else { status = 1 }

    console.log(status)

  })

})

---

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