Question

当选择了提交按钮但我不希望运行默认提交功能时，我有一个表单验证运行。相反，我想运行一个ajax后置代码来存储表单中的数据以及从服务器端发布数据。

我无法找到取消默认提交的位置并添加ajax代码。

这是我有的验证码

    $("#formEnroll").validate({
    errorElement:"p",
    submitHandler: function(form) {
            var phoneNumber = form.day_phone.value;             
            var phoneParts  = phoneNumber.split("-");
            form.dayArea.value = phoneParts[0];
            form.dayPrefix.value = phoneParts[1];
            form.daySuffix.value = phoneParts[2];               
            form.submit();
    }

});

这是我想要运行的ajax代码而不是默认提交

$.ajax({
    type: "POST",
    url: "/php/localProxy.php",
    data: $('#formEnroll').serialize(),
    success: function (response) {
            document.location = 'http://www.xxxx.com/thank-you';

    },
    error: function () {
            alert('There was a problem!');  // handle error
    }
        });

Answer 1

你可以调用ajax函数而不是form.submit（）; form.submit（）;将使用默认提交提交您的代码。

  $('#formEnroll').on('submit', function(e){
        e.preventDefault(); 

        $(this).validate({
            errorElement:"p",
            submitHandler: function(form) {
                var phoneNumber = form.day_phone.value;             
                var phoneParts  = phoneNumber.split("-");
                form.dayArea.value = phoneParts[0];
                form.dayPrefix.value = phoneParts[1];
                form.daySuffix.value = phoneParts[2];               
                submitform();
            }
        });
    })

    function submitform(){
    $.ajax({
        type: "POST",
        url: "/php/localProxy.php",
        data: $('#formEnroll').serialize(),
        success: function (response) {
                document.location = 'http://www.xxxx.com/thank-you';

        },
        error: function () {
                alert('There was a problem!');  // handle error
        }
    });

    }

Answer 2

您可以将验证插件包装到通用表单提交函数中以停止标准执行。

$('#formEnroll').on('submit', function(e)
{
    e.preventDefault(); // stop form submission

    // Run validation
    $(this).validate({
        errorElement:"p",
        submitHandler: function(form) {
            var phoneNumber = form.day_phone.value;             
            var phoneParts  = phoneNumber.split("-");
            form.dayArea.value = phoneParts[0];
            form.dayPrefix.value = phoneParts[1];
            form.daySuffix.value = phoneParts[2];               
            submitform(); // call your ajax function here
        }
    });
});

function submitform(){
    $.ajax({
        type: "POST",
        url: "/php/localProxy.php",
        data: $('#formEnroll').serialize(),
        success: function (response) {
                document.location = 'http://www.xxxx.com/thank-you';

    },
    error: function () {
        alert('There was a problem!');  // handle error
    }
});

除了使用事件对象e，您还可以在return false;函数末尾.on停止默认事件的发送。

Answer 3

您可以使用jquery中的click事件通过单击提交按钮来发送数据，该函数应return false以避免默认提交，方法是使用ajax发送数据并避免默认提交。

自定义表单验证和提交

3 个答案: