To show error messages healthy, each field must be wrapped by an element like <div>
<form id="exm" method="POST" action="#">
<div>
<label>Username :</label>
<input type="text" name="username" data-validetta="required,remote[check_username]">
</div>
<div>
<label>Password :</label>
<input type="text" name="pass" data-validetta="required">
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
(function($){
$('#exm').validetta({
realTime : true,
onValid : function( event ){
event.preventDefault(); // if you dont break submit and if form doesnt have error, page will post
alert('Success');
},
validators: {
remote : {
check_username : {
type : 'POST',
url : 'files/remote.php',
datatype : 'json'
}
}
}
});
});
<?php
$response = array( 'valid' => false, 'message' => 'Sorry, Something went wrong!');
if( isset($_POST['username']) ) {
if ( $_POST['username'] !== 'validetta' ) {
$response = array( 'valid' => false, 'message' => 'This username is already taken!' );
} else {
$response = array( 'valid' => true );
}
}
echo json_encode($response);;