Validetta demos

Back to examples

Sending ajax request when form is valid

Warning!

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