
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.
- Publication date: 28.04.2018
- Source