未执行Ajax隐藏表单提交验证

Ajax submit in hidden form validation not executed

本文关键字：表单提交 验证 隐藏 Ajax 执行      更新时间：2023-09-26

我有以下情况：

我有一个按钮。单击后，将显示一个隐藏的表单和提交按钮。该表单使用jQuery Validation插件进行验证。在提交处理程序中，我希望使用Ajax提交表单。我的问题是，我在提交处理程序中编写的代码似乎无法执行。

HTML页面：

<div class='col-md-9'>
    <div class='media-body'>
        <form id='accountForm'>
            <div class='input-group'>
                <div class='input-group-addon'>
                    First name:
                </div>
                <input class='form-control' type='text' name='firstName'>
            </div>
            <!--- some more inputs --->
        </form>
    </div>
</div>
<div class='col-md-3'>
    <div class='btn-group btn-group-vertical'>
        <!--- some buttons --->
        <button id='saveButton' class='btn' type='submit' form='accountForm'>
    </div>
</div>

JavaScript文件：

$(document).ready(function() {
    $('#accountForm').hide();
    $('#saveButton').hide();
    $('#editInfoButton').on('click', function() {
        $('#accountForm').show();
        $('#saveButton').show();
    });
    $('#accountForm').validate({
        rules: //some rules
        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: '/account/profile',
                data: $(form).serialize(),
                success: function(data, status, jqXHR) {
                    //some stuff
                }
            });
            return false;
        }
    });
});

当我点击提交按钮时，没有向/account/profile发送POST-请求，而是向/account?firstName=...发送GET-请求。我真的不明白为什么这不起作用。

所以这个问题有一个不错的答案：

用户Jack hardcastle的评论解决了问题中描述的我的情况。

愚蠢的问题可能是：如果您在表单标签中声明POST，会发生什么？AJAX请求的类型是POST，但是表单仍然没有定义操作/方法，因此表单执行仍然遵循这些操作/方法。

需要注意的是，与Sparky一样，并非所有浏览器都支持form属性，包括IE。

相关文章：