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

Simple jQuery Form Validation Plugin with jQuery UI and Bootstrap - ETFormValidation
File Size: 58.1KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.