Super Simple jQuery Form Validation Plugin

An easy yet useful jQuery plugin used to validate the form values your users input when clicking the submit button. 

Features:

• Auto saves content users input to prevent from losing data.
• Posts your form with Ajax.
• Some useful options to customize the form validation.

How to use it:

1. Load the jQuery library and jQuery form validation plugin in the footer to reduce the page load time.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.form-validation.min.js"></script>

2. Create an html form

<form id="testform">
<div class="field">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" id="full_name" class="required">
<div class="val-message">Please enter your first name</div>
</div>
<div class="field">
<label for="web_address">Your Web Address</label>
<input type="url" name="web_address" id="web_address" class="required">
<div class="val-message">Please enter a valid URL</div>
</div>
<div class="field">
<label for="email_address">Email Address</label>
<input type="email" name="email_address" id="email_address" class="email">
<div class="val-message">Please enter a valid email address</div>
</div>
<div class="field">
<label for="your_message">Your Message</label>
<textarea name="your_message" id="your_message" class="required"></textarea>
<div class="val-message">Please enter a valid email address</div>
</div>
<button type="submit">Submit</button>
<button type="reset">Clear</button>
</form>

3. Just call the plugin and you're done

<script>
$(function(){
$('#testform').formValidation();
});
</script>

4. All the options

<script>
$(function(){
$('#testform').formValidation({
username: '#full_name',
validationMessage   : 'val-message',
requireClass        : 'required',
emailClass          : 'email',
passClass           : 'pass',
passConfirmClass    : 'pass_confirm',
errorClass          : 'alert error',
errorBoxClass       : 'val-box',
otherMessages       : '.status-messages',
statusMessagesClass : 'js-status-message',
emailRegEx          : /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
passRegEx           : /^.*(?=.{8,})(?=.*[0-9])[a-zA-Z0-9]+$/,
showErrorMsg        : true,
consecutiveErrors   : true,
appendErrorToTitle  : true,
saveInputs          : true,
ajaxMode: true,
formSuccessMsgID    : '#success_message',
defaultErrorMsg     : "Please enter a value",
defaultSuccessMsg   : "You have successfully submitted the form",
defaultSuggestText  : "Did you mean",
dataURL : '',
successFunction     : null
});
});
</script>

Change log:

v1.0.1 (2013-12-18)

• Minor bug fix

---

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