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);;