Simple jQuery Form Validation Plugin with jQuery UI and Bootstrap - ETFormValidation

ETFormValidation is a simple and fast jQuery plugin that helps you to add a real time info validator to your form when users input.

You might also like:

• Powerful jQuery Form Validation Plugin - Validation Engine
• Event Based Bootstrap Form Validation Pluin with jQuery - formalerts
• Simple Form Validation Plugin with HTML5 and jQuery
• jQuery Plugin for Easy HTML5 Form Validation - Validatr
• Flexible Validation Plugin For jQuery - Pliant
• HTML5 Form Validation Plugin For jQuery - formvalidate
• Lightweight JS Form Validation Library - validate
• jqBootstrapValidation - Validation Framework For Bootstrap Form
• nextVal - jQuery Form Validation Plugin
• Customizable jQuery Client Side Validation Plugin - Verify.js
• Powerful Multi-Functional Form Validation Plugin - jQuery Validation

How to use it:

1. Include jQuery library, jQuery UI and Twitter Bootstrap library (optional) on your web page

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.etformvalidation.js" type="text/javascript"></script>

2. Markup

<form class="well form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Text / Optional</label>
<div class="controls">
<input type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label">Text / Required</label>
<div class="controls">
<input type="text" data-etfv=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">Text / Required</label>
<div class="controls">
<input type="text" data-etfv="simple" />
</div>
</div>
<div class="control-group">
<label class="control-label">Text / Max. 3 chars</label>
<div class="controls">
<input type="text" data-etfv="3"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Text / Number</label>
<div class="controls">
<input type="text" data-etfv="number"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Text / Date</label>
<div class="controls">
<input type="text" data-etfv="date"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls">
<input type="password" data-etfv=""/>
</div>
</div>
<div class="control-group">
<label class="control-label">Radiobutton</label>
<div class="controls">
<input type="radio" name="radio" data-etfv=""/>
Radio 1
<input type="radio" name="radio" data-etfv=""/>
Radio 2
<input type="radio" name="radio" data-etfv=""/>
Radio 3 </div>
</div>
<div class="control-group">
<label class="control-label">Checkbox</label>
<div class="controls">
<input type="checkbox" name="checkbox" data-etfv=""/>
Checkbox 1
<input type="checkbox" name="checkbox" data-etfv=""/>
Checkbox 2
<input type="checkbox" name="checkbox" data-etfv=""/>
Checkbox 3 </div>
</div>
<div class="control-group">
<label class="control-label">Textarea</label>
<div class="controls">
<textarea data-etfv=""></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Select</label>
<div class="controls">
<select data-etfv="">
<option value=""></option>
<option value="Select 1">Select 1</option>
<option value="Select 2">Select 2</option>
<option value="Select 3">Select 3</option>
</select>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value="Submit"/>
</div>
</div>
</fieldset>
</form>

3. Call the plugin with options

<script type="text/javascript">
$(document).ready(function() {
$("form").etformvalidation({
bootstrap: true,
dateFormat: 'mm/dd/yy',
error: 'Please fill in the whole form.'
});
});
</script>

---

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