Validate Input Fields Using Data Attributes | jQuery validate.js

jquery validation is a simple and lightweight form validation plugin that works with the most used input fields such as username, email, number, password, and more.

Attributes:

  • data-require=”true” (Also works in checkbox)
  • data-error=”Please enter the mobile number”
  • data-number='{“msg”: “Please enter the valid number”}’
  • data-long='{“len”: “10”, “msg”: “Number should be 10 characters long”}’
  • data-display=”mobile_error”
  • data-min='{“len”: “6”, “msg”: “Minimum 6 chars long”}’
  • data-max='{“len”: “20”, “msg”: “Maximum 6 chars long”}’
  • data-match='{“to”: “pass”, “msg”: “Password does not match”}’
  • data-onlychar='{“msg”: “Only characters are allowed”}’
  • data-charwithspace='{“msg”: “Only characters are allowed with space”}’
  • data-email='{“msg”: “Please enter valid email”}’
  • data-radio=”true”
  • data-image=”true
  • data-config='{“msg”: “Please choose valid image”, “allow”: “jpg, png, jpeg”}’
  • data-size='{“size”: “2000”, “msg”: “Too large size”}’

Must Read: JQuery Plugin To Validate The Input Value For The IP Address | IpInput

How to make use of it:

1. Load the validate.js after the jQuery library.

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

2. Apply validation guidelines to input fields utilizing the next HTML data attributes:

<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 submission.

$(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)

  })

})

Read More –

Custom Basic Form Validator/Checker in jQuery | inputfollow.js
[Payment] Creating Credit Card Forms, Validating Inputs, and Formatting Numbers


See Demo And Download

Official Website(DesaiRamesh955): Click Here

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

Share