Press "Enter" to skip to content

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 mobile number”
  • data-number='{“msg”:”Please enter valid number”}’
  • data-long='{“len”:”10″,”msg”:”Number should be 10 charators long”}’
  • data-display=”mobile_error”
  • data-min='{“len”:”6″,”msg”:”Minimun 6 chars long”}’
  • data-max='{“len”:”20″,”msg”:”Maximum 6 chars long”}’
  • data-match='{“to”:”pass”,”msg”:”Password not match”}’
  • data-onlychar='{“msg”:”Only charactors are allowed”}’
  • data-charwithspace='{“msg”:”Only charactors are allowed with space”}’
  • data-email='{“msg”:”Please enter valid email”}’
  • data-radio=”true”
  • data-image=”true
  • data-config='{“msg”:”Please chhose valid image”,”allow”:”jpg,png,jpeg”}’
  • data-size='{“size”:”2000″,”msg”:”Too large size”}’

International Telephone Input With Flags And Dial Codes Library

How to make use of it:

1. Load the validate.js after the jQuery library and we’re able to go.

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

  })

})

Validate Form Fields Using HTML Data Attributes, jquery validation Plugin/Github


See Demo And Download

Official Website(DesaiRamesh955): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *