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