0

我整天都在为此苦苦挣扎。我需要验证表单，如果有效，请使用 ajax 调用提交。从我读过的内容来看，一旦发生所有验证，包括远程检查，submitHandler 应该会触发。

当我输入一个已经存在的用户名时，我收到了'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>
4

1 回答 1

0

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

重要： 根据文档，

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

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

引用操作：

“当我输入一个已经存在的用户名时，我收到'用户名已经存在'消息并且submitHandler没有按预期调用。但是如果任何其他验证检查失败，表单将正常发布到表单操作 url，并且 submitHandler回调似乎永远不会被调用。”

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

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

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

提示：

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

errorPlacement: function (error, element) {
    return false;
}
于 2013-08-21T17:56:52.900 回答