Question

我整天都在苦苦挣扎。我需要验证表单，如果有效，则使用ajax调用提交。从我读过的内容开始，所有验证发生后都会触发submitHandler，包括远程检查。

当我输入已存在的UserName时，我收到'User Name already exists'消息，并且未按预期调用submitHandler。但是，如果任何其他验证检查失败，表单将正常发布到表单操作URL，并且似乎永远不会调用submitHandler回调。

希望有人能看出我做错了什么：

<form id="addUserForm">
    <table class="table table-striped table-bordered">
        <thead class="text-warning">
            <tr>
                <th>User Name</th>
                <th>Password</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>User Type</th>
                <th class="center">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" value="" name="username" id="Name" class="span12">
                </td>
                <td>
                    <input type="password" value="" name="password" id="Password" class="span12">
                </td>
                <td>
                    <input type="text" value="" name="forename" id="FirstName" class="span12">
                </td>
                <td>
                    <input type="text" value="" name="surname" id="LastName" class="span12">
                </td>
                <td>
                    <input type="text" value="" name="email" id="Email" class="span12">
                </td>
                <td>
                    <select name="Type" class="span12" id="Type">
                                <option>Administrator</option>
                                <option selected="selected">Standard</option>
                                <option>Surveyor</option>

                    </select>
                </td>
                <td class="center">
                    <button class="btn" id="btnAdd">Add</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>
<script>
    $(document).ready(function () {

        $('#addUserForm').validate({
            onsubmit: true, onfocusout: false, onkeyup: false, onclick: false, errorPlacement: function (error, element) { },
            invalidHandler: function (event, validator) {
                if (validator.errorList.length) {
                    alert(validator.errorList[0].message);
                    validator.errorList[0].element.focus();
                }
            },
            rules: {
                username: { required: true, remote: '/admin/isusernameavailable' },
                password: { required: true },
                forename: { required: true },
                surname: { required: true },
                email: { required: true, email: true }
            },
            messages: {
                username: { required: 'User Name is required', remote: 'User Name already exists' },
                password: { required: 'Password is required' },
                forename: { required: 'First Name is required' },
                surname: { required: 'Last Name is required' },
                email: { required: 'Email Address is required', email: 'Email Address is invalid' }
            },
            submitHandler: function (form) {
                // create the data object
                var data = {
                    Name: $('#Name').val(),
                    Password: $('#Password').val(),
                    FirstName: $('#FirstName').val(),
                    LastName: $('#LastName').val(),
                    Email: $('#Email').val(),
                    Type: $('#Type').val()
                }

                // post the form
                var posting = $.post('/admin/adduser', data);

                // post success
                posting.done(function (data) {

                    // display the results
                    $('#results').html(data);

                    $('#Name').val('');
                    $('#Password').val('');
                    $('#FirstName').val('');
                    $('#LastName').val('');
                    $('#Email').val('');
                    $('#Type').val('Standard');
                });

                // post error
                posting.fail(HandlePostFailError);
            }
        });
    });
</script>

Answer 1

您不需要onsubmit: true选项，因为这是默认行为。

重要：as per docs，

onsubmit
在提交时验证表单。设置为false以仅使用其他事件进行验证。设置为函数以自行决定何时运行验证。 布尔值true不是有效值。

换句话说，您必须删除该行，因为true会破坏该插件。

引用OP ：

“当我输入已存在的UserName时，我收到'用户名已存在'消息，并且未调用submitHandler，因为预期。但是，如果任何其他验证检查失败，表单将获得通常发布到表单操作url和submitHandler回调似乎永远不会被称为。“

如果存在未完成的错误，则不应发布表单，并且在验证错误后不应激活submitHandler。 submitHandler回调函数仅在表单有效时触发 ...

submitHandler（默认：原生表格提交）
类型：功能（）
在表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。该在验证后通过Ajax提交表单的正确位置。

请参阅：http://jqueryvalidation.org/validate

提示：

如果你想摆脱插件的错误放置功能，那么简单地将函数留空可能不是一个好主意。而是在回调函数中放置一个return false。

errorPlacement: function (error, element) { return false; }

jquery验证ajax和远程字段意外行为

1 个答案: