Question

我有一个表单，带有文本输入和提交按钮。

在提交时，我想首先点击服务器以查看输入是否有效，然后根据响应显示错误消息或是否有效，继续提交表单。

这就是我所拥有的：

$('#new_user').submit(function(e) { 
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "/users/stuff",
        data: $('#new_user').serialize(),
        success: function(data){
            if (data.valid) {
                return true
            } else {
                // Show error message
                return false;
                e.preventDefault();
            }
        }
    });
});

问题是表单总是提交，给定用例，什么是正确的实现方式？感谢

Answer 1

试试这样：

$('#new_user').submit(function(e) { 
    var $form = $(this);

    // we send an AJAX request to verify something
    $.ajax({
        type: "POST",
        dataType: 'json',
        url: "/users/stuff",
        data: $form.serialize(),
        success: function(data){
            if (data.valid) {
                // if the server said OK we trigger the form submission
                // note that this will no longer call the .submit handler
                // and cause infinite recursion
                $form[0].submit();
            } else {
                // Show error message
                alert('oops an error');
            }
        }
    });

    // we always cancel the submission of the form
    return false;
});

Answer 2

由于您已经通过AJAX提交，为什么不提交数据然后是否有效而不是两次传输数据？

也就是说，进行Ajax调用的函数需要是返回false的函数。然后，successvfunction应以：

结束

$('#new_user').submit()

AJAX是异步的这一事实让你失望。

请原谅任何错别字，我在手机上这样做。

Answer 3

将相同的帖子提交给服务器两次似乎是不必要的。如果表单没有（或不能）成功提交，我猜你只想留在同一页面上。如果我理解你的意图正确，只需从成功处理程序中重定向：

$('#new_user').submit(function(e) {  
    $.ajax({ 
        type: "POST", 
        dataType: 'json', 
        url: "/users/stuff", 
        data: $('#new_user').serialize(), 
        success: function(data){ 
            location.href = "success.htm";
        },
        // if not valid, return an error status code from the server
        error: function () {
            // display error/validation messaging
        }
    }); 
    return false;
});

Answer 4

另一种方法

编辑：两次提交相同的数据似乎是多余的，不确定这是否是预期的。如果服务器在第一次尝试时获得有效数据，则重新发送

var isValid=false;
$('#new_user').submit(function(e) { 
    var $form = $(this);
     /* only do ajax when isValid is false*/
    if ( !isValid){
            $.ajax({
                type: "POST",
                dataType: 'json',
                url: "/users/stuff",
                data: $form.serialize(),
                success: function(data){
                    if (data.valid) {
                        isValid=true;
                        /* submit again, will bypass ajax since flag is true*/
                        $form.submit();

                    } else {
                        // Show error message
                        alert('oops an error');
                    }
                }
            });
    }

    /* will return false until ajax changes this flag*/
    return isValid;
});

给定表单提交，如果服务器首先响应有效标志，如何提交？

4 个答案: