To show error messages healthy, each field must be wrapped by an element like <div>
<form id="exm1" method="POST" action="#">
<div>
<label>Required, minLength[2], maxLength[3] :</label>
<input type="text" name="name" data-validetta="required,minLength[2],maxLength[3]">
</div>
<div>
<label>Required, Number :</label>
<input type="text" name="number" data-validetta="number,required">
</div>
<div>
<label>EqualTo (name number) :</label>
<input type="text" name="equalto" data-validetta="required,equalTo[number]">
</div>
<div>
<label>Different (name number) :</label>
<input type="text" name="different" data-validetta="different[number]">
</div>
<div>
<label>Email :</label>
<input type="text" name="email" data-validetta="email">
</div>
<div>
<label>Credit Cart :</label>
<input type="text" name="creditCard" data-validetta="creditCard" />
</div>
<div>
<label>RegExp :</label>
<input type="text" name="regExp" data-validetta="regExp[regname]" />
</div>
<div>
<label>Callback :</label>
<input type="text" name="callback" data-validetta="callback[sum]" />
</div>
<div>
<label>Required ( Textarea ) :</label>
<textarea name="exm-txt" data-validetta="required"></textarea>
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
(function($){
$('#exm1').validetta({
validators: {
regExp: {
regname : {
pattern : /^hello$/i,
errorMessage : 'Custom Reg Error Message !'
},
// you can add more
example : {
pattern : /^[\+][0-9]+?$|^[0-9]+?$/,
errorMessage : 'Please enter number only !'
}
},
callback: {
sum: {
callback: function( el, value ) {
if ( value == ( 3 + 5 ) ){
return true
}
return false
},
errorMessage: "Incorrect total"
}
}
},
realTime : true
});
});
<form id="exm2" method="POST" action="#">
<div>
<label>Required ( Checkbox ) :</label> <br>
<input type="checkbox" data-validetta="required" name="exm-cbr"/>
</div>
<div>
<label>maxChecked[1], minChecked[2]</label><br>
<input type="checkbox" name="exm-cb" data-validetta="minChecked[1],maxChecked[2]"> 1 <br />
<input type="checkbox" name="exm-cb" data-validetta="minChecked[1],maxChecked[2]"> 2 <br />
<input type="checkbox" name="exm-cb" data-validetta="minChecked[1],maxChecked[2]"> 3 <br />
</div>
<div>
<label>Required ( radio ) :</label><br>
<input type="radio" name="exm-rd" data-validetta="required">
<input type="radio" name="exm-rd" data-validetta="required">
<input type="radio" name="exm-rd" data-validetta="required">
</div>
<div>
<label>Required ( selectbox ) :</label>
<select data-validetta="required" name="exm-sb">
<option val="">Please select an option</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
<option val="5">5</option>
</select>
</div>
<div>
<label>minSelected[2],maxSelected[2] :</label>
<select data-validetta="minSelected[2],maxSelected[2]" multiple="multiple" name="exm-msb">
<option value="">Please select an option</option>
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
<option val="4">4</option>
<option val="5">5</option>
</select>
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
(function($){
$('#exm2').validetta({
realTime : true
});
});