A simple jQuery validation plugin for bootstrap based templates with a lot of customization.
Download the file from src/ directory. You can download either the original version or the minified one(named as .min.js).
As this plugin is dedicated to bootstrap based responsive websites, there are a few basic set of how ach input element should look like.
<div class="control-group">
<label for="id_mobilePhone"Mobile Number</label>
<div class="controls">
<input id="id_mobilePhone" name="mobilePhone">
<span class="help-block"</span>
</div>
</div>
<script type='text/javascript'>
$().validate(); //As simple as this!!!
</script>
This plugin has a number of customizable features and these will be discusses one by one here: The following are the options that can be passed on whili initializing the plugin:
-
class_name - Only attributes with this class name will be included for validation. Default is all input elements in the form.
-
event_name - Sometimes you may have to listen for a customized event such as 'IfClicked' (used in icheck plugin). Default will be change. Any valid jQuery event can be passed.
-
attr_name - You can specify on what basis the plugin should address the DOM elements. It can be either by name or ID. Default is ID.
-
post_url - The target URL to which the data has to be posted.(A JSON response will be expected on success).
-
post_data - By default only the item name/ID & its value will be passed. You can add more data to a dictionary and pass it to this argument. Default will be empty.
-
attrs - By default only the item name/ID & its value will be passed. You can add more attributes by specifying them as an array. For each item in the list a DOM lookup will happen by adding id_ to the given name and its value will be fetched. Default will be empty.
Detailed examples of each argument discussed above will be added here:
<script type='text/javascript'>
$().validate({\
'class_name':'validate', 'event_name':'ifToggled',\
'attr_name':'name', 'post_url':"http://google.com/validate/", \
'post_data':{'Timestamp':new Date().toString()}, \
'attrs':['page_id','page_name']\
});
<script>
- Make sure the problem you're addressing is reproducible.
- Use http://jsbin.com or http://jsfiddle.net to provide a test page.
- Indicate what browsers the issue can be reproduced in. Note: IE versions < 7 Compatibilty modes issues will not be addressed.
- Version of the plugin.
Contributions are always welcomme :)
Copyright (c) 2014 Vivek Soundrapandi