Basic Login/Signup Form Validation Plugin With jQuery - Validatr
File Size: | 7.16 KB |
---|---|
Views Total: | 7033 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Validatr is a simple to use jQuery plugin which provides basic form validation functionality for required, email and zip input fields. Great for use in contact and subscription forms.
Features:
- Custom error and success messages.
- Custom CSS class for input fields when invalid.
- Allows to submit the form asynchronously.
- Allows to validation form fields on submit or on blue.
- Uses Font Awesome for error icon.
Basic usage:
1. Create a login/signup form with name and email fields on your webpage.
<form action="" method="post"> <label><span>Name*</span> <input type="text" class="req" name="Name"/> </label> <label><span>Email*</span> <input type="text" class="req email" name="Email"/> </label> <input type="submit" value="Submit"/> <p class="status"> </p> </form>
2. Download the plugin and include the JavaScript jquery.validatr.js
after jQuery library.
<script src="jquery.min.js"></script> <script src="jquery.validatr.js"></script>
3. Active the form validation plugin.
$('form').validatr();
4. All configuration options with default values.
$('form').validatr({ // Element that will display the status returned statusElement: '.status', // Class of required form elements requiredClass: 'req', // Class to add to inputs with errors errorClass: 'error', // Check value on input's blur validateOnBlur: true, // Class of inputs containing emails to be validated emailClass: 'validateEmail', // Class of inputs containing zip codes to be validated zipClass: 'validateZip', // Add an .fa-warning to error messages useFontAwesome: false, // Submit a value for $_POST['timer'] filterSpam: false, // Submit the form asynchronously useAJAX: false, // Where to submit the form (if using AJAX) handlerPath: 'handleForm.php', // Disable form controls on success disableOnSuccess: true, // What a successful submission will return successStatus: 'success', // Replace form with success message when submitted replaceForm: false, // Clear inputs within form element on success clearInputs: false, // Message displayed while form is submitting submitMessage: 'Submitting...', // Success message to be displayed successMessage: 'Thanks for contacting us!', // Default error message errorMessage: 'Please complete all required fields.' });
This awesome jQuery plugin is developed by StephenWidom. For more Advanced Usages, please check the demo page or visit the official website.