Basic Login/Signup Form Validation Plugin With jQuery - Validatr

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">&nbsp;</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.