To show error messages healthy, each field must be wrapped by an element like <div>
<div id="alert"></div> <form id="exm" method="POST" action="#"> <div> <label>Required, Email :</label> <input type="text" name="name" data-validetta="required,minLength[2],maxLength[3]"> </div> <div> <label>Email :</label> <input type="text" name="email" data-validetta="required,email"> </div> <button type="submit">Submit</button> <button type="reset">Reset</button> </form>
(function($){ $('#exm').validetta({ onValid : function( event ) { event.preventDefault(); $('#alert').empty() .append('<div class="alert alert-success">Nice, Form is valid</div>'); }, onError : function( event ){ $('#alert').empty() .append('<div class="alert alert-danger">Stop bro !! There are some errors.</div>'); } }); });