自定义表单验证和提交

Custom Form Validation and Submit

本文关键字：提交 验证 表单 自定义      更新时间：2023-09-26

当选择提交按钮时，我会运行表单验证，但我不希望运行默认的提交函数。相反，我想运行一个ajax post代码来将数据存储在表单中，同时从服务器端发布数据。

我很难找到取消默认提交并添加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
    }
        });

您可以调用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
        }
    });
    }

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

$('#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，您还可以在.on函数的末尾仅使用return false;来停止触发默认事件。

您可以通过点击提交按钮，使用jquery中的点击事件通过ajax发送数据，该函数应为return false，通过使用ajax发送数据和避免默认提交的方式来避免默认提交。

相关文章：