Tiny Animated Form Validation Plugin - jQuery formValid

Tiny Animated Form Validation Plugin - jQuery formValid
File Size: 115 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="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;
});

6. Add your own validation rules using Regex.

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

Change log:

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.