To show error messages healthy, each field must be wrapped by an element like <div>
<form id="exm" method="POST" action="#"> <div class="form-group"> <div class="row"> <div class="col-md-2"> <label>Your Name :</label> </div> <div class="col-md-2"> <input type="text" class="form-control" name="name" data-validetta="required" placeholder="Mandatory field" data-vd-parent-up="2"> </div> </div> </div> <button type="submit">Submit</button> <button type="reset">Reset</button> </form>
(function($){ $('#exm').validetta({ realTime: true, display : 'inline', errorTemplateClass : 'validetta-inline', onValid : function( event ) { event.preventDefault(); alert('Success'); } }); });