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