Validetta demos

Back to examples

Remote validation

Warning!

To show error messages healthy, each field must be wrapped by an element like <div>


Info validetta is valid username

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