Question

我的表单中有onsubmit验证有效，但我的ajax文件仍在发出http请求。

以下是表格：

<form class="ajax" action="mecha.php" name="ajax" method="post" onsubmit="return answer_validate(document.forms.ajax);">
    <input type="text" name="user_answer">
    <input type="submit" class="submit">
</form>

以下是触发的验证功能onsubmit：

function answer_validate(f) { 

    if (f.user_answer.value.length > 23 || f.user_answer.value.length < 1) {

        document.getElementById("notice").innerHTML = "please input an answer";

    return false; 
    }

return true;
}

最后这里是发送表单的AJAX文件（即使验证函数返回false，这也就是问题！）：

$('form.ajax').on('submit', function() {

var that = $(this),
url  = that.attr('action'),
type = that.attr('method'),
data = {};

that.find('[name]').each(function(index, value) {
    var that  = $(this),
        name  = that.attr('name'),
        value = that.val();
        data[name] = value;
});

$.ajax({
    url : url,
    type: type,
    data: data,
    success: function(response) {
        $('.output').html(response);
    }

});

return false;
});

总而言之，表单通过function验证，该true返回false或onsubmit。提交时，即使验证返回false，AJAX仍然会发送表单。无论如何，为什么AJAX仍然会发送表单？

我试过这个例子而没有通过AJAX发送表单，{{1}}正常工作（暂停表单提交，直到验证返回true）。

那么我错过了什么？

Answer 1

你应该在answer_validate()部分内调用$('form.ajax').on('submit', ....)函数..在jQuery submit事件内同样使用表格提交事件，见下文

$('form.ajax').on('submit', function(e) {

if(!answer_validate(this)){
    e.preventDefault(); 
    return false;
}

/*ajax part*/

})

更新回答 好的，如果条件允许，请在{... 1}外面添加..见下文，

e.preventDefault();

并使用此条件$('form.ajax').on('submit', function(e) { e.preventDefault(); if(!answer_validate(this)){ return false; } /*ajax part*/ })

if($.trim(f.user_answer.value).length > 23 || $.trim(f.user_answer.value).length == 1)

PS ：使用function answer_validate(f) { if ($.trim(f.user_answer.value).length > 23 || $.trim(f.user_answer.value) == "") { document.getElementById("notice").innerHTML = "please input an answer"; return false; } return true; }函数删除空格

Answer 2

function answer_validate(f) { 

    if (f.user_answer.value.length > 23 || f.user_answer.value.length < 1) {

        document.getElementById("notice").innerHTML = "please input an answer";

    f.preventDefault(); 
    }
}

这可能就足够了，我相信返回false是弃用的... 如果这不起作用，您也可以在提交事件处理程序

中检查它

    $('form.ajax').on('submit', function(event) {

    if (event.user_answer.value.length > 23 || event.user_answer.value.length < 1) {

        document.getElementById("notice").innerHTML = "please input an answer";

    event.preventDefault(); 
    }else {
    var that = $(this),
    url  = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {
        var that  = $(this),
            name  = that.attr('name'),
            value = that.val();
            data[name] = value;
    });

    $.ajax({
        url : url,
        type: type,
        data: data,
        success: function(response) {
            $('.output').html(response);
        }

    });

}
    });

通过AJAX发送表单，但只有在验证返回true后才能发送

2 个答案: