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 }); });