如何防止jquery验证表单只有一个按钮?

时间:2012-03-07 04:17:00

标签: javascript knockout.js

我使用了KnockoutJS和Jquery Validate。如果我有一个按钮,它工作得很好。现在我想要另一个这样的按钮:

<button data-bind="jqueryui: 'button'">Submit</button>
<button data-bind="jqueryui: 'button'">Reset</button>

问题是:当重置按钮单击将输入字段重置为空时,它也会像提交按钮一样运行验证。单击“重置按钮”时如何防止验证?

我的代码: CSHTML

<table>
<tr>
    <td valign="middle">
        Old Password
    </td>
    <td>
        <input id="oldPassword" name="oldPassword" type="text" data-bind="value: OldPassword, valueUpdate: 'afterkeydown'" />
    </td>
</tr>
<tr>
    <td valign="middle">
        New Password
    </td>
    <td>
        <input id="newPassword" name="newPassword" type="text" data-bind="value: NewPassword, valueUpdate: 'afterkeydown'" />
    </td>
</tr>
<tr>
    <td valign="middle">
        Confirm New Password
    </td>
    <td>
        <input id="confirmNewPassword" name="confirmNewPassword" type="text"
            data-bind="value: ConfirmNewPassword, valueUpdate: 'afterkeydown'" />
    </td>
</tr>
<tr>
    <td colspan="2">
        <button data-bind="jqueryui: 'button'">
            Submit</button>
        <button data-bind="jqueryui: 'button'">
            Reset</button>
    </td>
</tr>

KnockoutJs

if (!!$('form')) {
                    $('form').validate({
                        submitHandler: function () { params.viewModel.Presenter.CheckPassword(); },
                        rules: {
                            oldPassword: {
                                required: true,
                                minlength: 3
                            },
                            newPassword: {
                                required: true,
                                minlength: 3
                            },
                            confirmNewPassword: {
                                equalTo: '#newPassword'
                            }
                        },
                        messages: {

                    }
                });

1 个答案:

答案 0 :(得分:2)

将类型设置为按钮,重置将起作用...

<button type="submit" data-bind="jqueryui: 'button'">Submit</button>
<button type="reset" data-bind="jqueryui: 'button'">Reset</button>