如何在验证代码中成功添加ajax代码

Question

how to add ajax code in success of validation code

<script type="text/javascript">
        $(document).ready(function () {

            $("#footer-request-form").validate({
                errorClass: 'has-error',
                success: "valid",

                errorPlacement: function (error, element) {
                    if(error.html()) error.appendTo(element.parent("div.form-group").addClass('has-error'));
                },

                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents("div.form-group").removeClass('has-error');
                },
                success:function (label, element) {
                    $(element).removeClass("has-error");
                    $(element).parent().find('label.has-error').remove();
                },
                rules: {
                    name: {required: true},
                    phone: {phoneUS: true, required: true},
                    email: {required: true, email: true}
                },
                messages: {
                    phone: "Please enter a valid  phone number",
                    name: "Name is required!",
                    email: "Please enter a valid email address",
                }

            });
        });


    </script>

where to add ajax form on success of above code

jQuery.ajax({
            url: "contact_mail.php",
            data:'userName='+$("#name").val()+'&userEmail='+$("#email").val(),
            type: "POST",
            success:function(data){
            $("#mail-status").html(data);
            },
            error:function (){}
            });
        }

Answer 1

try with submitHandler in jQuery

$('#form').validate({

... your validation rules come here,

submitHandler: function(form) {
    jQuery.ajax({
        url: "contact_mail.php",
        data:'userName='+$("#name").val()+'&userEmail='+$("#email").val(),
        type: "POST",
        success:function(data){
        $("#mail-status").html(data);
        },
        error:function (){}
        });
}
});