Below are a couple of examples to quick start with the module
Since Forms added already the validation classes, we can use the add_class="no" to avoid that the plugin will add all of the validation classes.
{exp:forms_js_validation:init}
{exp:forms_js_validation:add
selector="form#new_submission"
promt_position="bottom-top"
scroll="yes"
auto_hide_prompt="no"
auto_hide_delay="500"
add_class="no"
}
{exp:forms:form form_name="untitled"}{exp:forms_js_validation:init}
{exp:forms_js_validation:add
selector="form#new_submission"
promt_position="bottom-top"
scroll="yes"
auto_hide_prompt="no"
auto_hide_delay="500"
add_class="no"
ajax_form_validation="yes"
ajax_form_validation_method="post"
}
{exp:forms:form form_name="untitled"}{exp:forms_js_validation:init}
{exp:forms_js_validation:add
selector="form"
input_element_wrapper=".form-group"
email_class="require_email"
require_class="require"
group_class="group"
min_class="minimum"
max_class="maximum"
min_size_class="min_size"
max_size_class="max_size"
integer_class="is_int"
number_class="number"
phone_class="phone"
url_class="url"
date_class="date"
ipv4_class="ip4v"
equals_class="equals"
min_checkbox_class="min_checkbox_class"
max_checkbox_class="max_checkbox_class"
}
<form role="form">
<!-- Normal required validation -->
<!-- Notice the div that wrap the input field (input_element_wrapper=".control-group" )-->
<div class="form-group">
<label for="input-veld">Require</label>
<input type="text" name="input-veld" class="require form-control"/>
<select class="require form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<!-- Normal required validation -->
<!-- Notice the div that wrap the input field (input_element_wrapper=".control-group" )-->
<div class="form-group">
<label for="input-veld">Require</label>
<textarea name="textarea-veld" class="require form-control"></textarea>
</div>
<!-- Email validation -->
<div class="form-group">
<label for="email">Require Email</label>
<input type="text" name="email" class="require require_email form-control"/>
</div>
<!-- Group validation '[group_class]:[group_name]' -->
<div class="form-group">
<label for="input-veld1">Group</label>
<input type="text" name="input-veld1" class="group:payments form-control"/>
</div>
<div class="form-group">
<label for="input-veld2">Group</label>
<input type="text" name="input-veld2" class="group:payments form-control"/>
</div>
<!-- Minimum value validation '[Minimum_class]:[Minimum_value]'-->
<div class="form-group">
<label for="input-veld3">Minimum</label>
<input type="text" name="input-veld3" class="Minimum:3 form-control"/>
</div>
<!-- maximum value validation '[maximum_class]:[maximum_value]'-->
<div class="form-group">
<label for="input-veld4">Maximum</label>
<input type="text" name="input-veld4" class="maximum:15 form-control"/>
</div>
<!-- Minimum size validation '[minimum_size_class]:[minimum_size_value]'-->
<div class="form-group">
<label for="input-veld5">min_size</label>
<input type="text" name="input-veld5" class="min_size:10 form-control"/>
</div>
<!-- maximum size value validation '[maximum_size_class]:[maximum_size_value]'-->
<div class="form-group">
<label for="input-veld6">max_size</label>
<input type="text" name="input-veld6" class="max_size:35 form-control"/>
</div>
<!-- validate for integer-->
<div class="form-group">
<label for="input-veld7">is_int</label>
<input type="text" name="input-veld7" class="is_int form-control"/>
</div>
<!-- validate for number-->
<div class="form-group">
<label for="input-veld8">number</label>
<input type="text" name="input-veld8" class="number form-control"/>
</div>
<!-- validate for phone number-->
<div class="form-group">
<label for="input-veld9">phone</label>
<input type="text" name="input-veld9" class="phone form-control"/>
</div>
<!-- validate for url-->
<div class="form-group">
<label for="input-veld10">url</label>
<input type="text" name="input-veld10" class="url form-control"/>
</div>
<!-- validate for date-->
<div class="form-group">
<label for="input-veld11">date</label>
<input type="text" name="input-veld11" class="date form-control"/>
</div>
<!-- validate for date-->
<div class="form-group">
<label for="input-veld12">ipv4</label>
<input type="text" name="input-veld12" class="ipv4 form-control"/>
</div>
<!-- validate for equals-->
<div class="form-group">
<label for="input-veld13">equals</label>
<input type="text" name="input-veld13" class="equals:input-veld12 form-control"/>
</div>
<!-- validation with condition-->
<div class="form-group">
<label for="input-veld14">condition</label>
<input type="text" name="input-veld14" class="condition:input-veld10 form-control"/>
</div>
<!-- Past validation -->
<div class="form-group">
<label for="input-veld15">date past</label>
<input type="text" name="input-veld15" class="require date past:now form-control"/>
</div>
<!-- Future validation -->
<div class="form-group">
<label for="input-veld16">date future</label>
<input type="text" name="input-veld16" class="require date future:now form-control"/>
</div>
<!-- Creditcard validation -->
<div class="form-group">
<label for="input-veld17">creditcard</label>
<input type="text" name="input-veld17" class="creditcard form-control"/>
</div>
<!-- Radio -->
<div class="form-group">
<label for="input-veld18">Radio</label>
Radion 1: <input class="require" type="radio" name="radio" id="radio1" />
Radion 2: <input class="require" type="radio" name="radio" id="radio2" />
Radion 3: <input class="require" type="radio" name="radio" id="radio3" />
</div>
<!-- Radio -->
<div class="form-group">
<label for="input-veld19">Min Checkbox 2</label>
Checkbox 1: <input class="min_checkbox_class:2" type="checkbox" name="checkbox_min" id="checkbox_min1" />
Checkbox 2: <input class="min_checkbox_class:2" type="checkbox" name="checkbox_min" id="checkbox_min2" />
Checkbox 3: <input class="min_checkbox_class:2" type="checkbox" name="checkbox_min" id="checkbox_min3" />
</div>
<!-- Radio -->
<div class="form-group">
<label for="input-veld20">Max Checkbox 2</label>
Checkbox 1: <input class="max_checkbox_class:2" type="checkbox" name="checkbox_max" id="checkbox_max1" />
Checkbox 2: <input class="max_checkbox_class:2" type="checkbox" name="checkbox_max" id="checkbox_max2" />
Checkbox 3: <input class="max_checkbox_class:2" type="checkbox" name="checkbox_max" id="checkbox_max3" />
</div>
<!-- max textarea-->
<div class="form-group">
<label for="input-veld">Max textarea</label>
<textarea name="textarea-veld-max" id="textarea-veld-max" class="max_size:10 form-control"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>