Tiny Animated Form Validation Plugin - jQuery formValid

A lightweight (3kb) jQuery form validation plugin used for validating your form fields on keyup and/or submit.

With animated error messages when the form fields are invalid that slide down from the top, based on CSS3 animations.

It comes with 6 built-in validation rules that are easy to integrate into your existing form fields.

How to use it:

1. Import jQuery JavaScript library and the jQuery formValid plugin's files into the html document.

<link rel="stylesheet" href="/path/to/dist/jquery.formValid.css">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.formValid.js"></script>

2. Add the requireddata-field attribute to your form fields. The valid-message element is used to place the error message when the form field is invalid.

<form id="form">

  <!-- Email -->
  <input type="text" id="labelLogin" class="form-control" data-field="login">
  <label for="labelLogin">Email *</label>
  <div class="valid-message"></div>

  <!-- Password -->
  <input type="password" id="labelPassword" class="form-control" data-field="password">
  <label for="labelSurname">Password *</label>
  <div class="valid-message"></div>
  
  <!-- Submit Button -->
  <button type="submit">Submit</button>

</form>

3. Initialize the formValid plugin and apply a validation rule to the form field. Avaiable validation rules:

• null: Checks if the field is empty.
• email: Checks if a valid email address.
• number: Checks if is a number.
• letters: Checks if is text.
• phone: Checks if is a valid telephone number.
• postcode: Check if is a postal code.

var myForm = $('#form').formValid({
    fields: {
      "login": {
        "required": true,
        "tests": [
          {
              "type": "null",
              "message": "Not entered login"
          },
          {
              "type": "email",
              "message": "Your email is incorrect"
          }
        ]
      },
      "password": {
        "required": true,
        "tests": [
          {
            "type": "null",
            "message": "Not entered password"
          }
        ]
      }
    }
});

4. Run the validation for the modified field after a specific timeout value.

form.keypress(100);

5. Enable the submit button to validate all the form fields before submitting.

$('button[type="submit"]').click(function() {
  myForm.test();
  if (myForm.errors() == 0) {
      alert('Ok');
  }
  return false;
});

6. Add your own validation rules using Regex.

"tests": [
  {
    "regex": "^[A-Z]+$", 
    "message": "Only upper-case letter"
  }
]

Changelog:

2020-10-08

• JS updated

2018-04-29

• Allows custom validation rules with REGEX.

---

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