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.

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

<link rel="stylesheet" href="jquery.formValid.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="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;
});

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