To show error messages healthy, each field must be wrapped by an element like <div>
<form id="exm" method="POST" action="#"> <div> <label>Required :</label> <input type="text" name="name" data-validetta="required"> </div> <div> <label>Email :</label> <input type="text" name="email" data-validetta="email"> </div> <button type="submit">Submit</button> <button type="reset">Reset</button> </form>
(function($){ $('#exm').validetta({ onValid : function( event ) { event.preventDefault(); // this -> form object // this.form is form element $.ajax({ url : 'ajax.json', data : $(this.form).serialize(), dataType : 'json', beforeSend : function(){ console.log('Started request !'); } }) .done( function( data ){ alert('Student Name : '+data.student[0].name+' Student No :'+data.student[0].no); }) .fail( function( jqXHR, textStatus ){ console.log(textStatus+':'+jqXHR.status+' : '+jqXHR.statusText); }) .always( function( result ){ console.log('Request done !!'); }); }); });