jQuery Validate 确定表单提交中使用的按钮

Question

我正在尝试确定按钮是否用于提交表单。

我有两个按钮 - 在表单中取消和提交，根据点击哪个按钮，我想在提交之前执行一些功能。

我可以从服务器端的 POST 确定值​​，但需要先在客户端这样做

我应该调用什么 jquery 函数来确定是否使用了“取消”按钮？

表单的提交正在作为 jquery 验证的 submitHandler 事件的一部分进行处理。

这里是元素：

<input name="submit" type="submit" value="Submit" />
<input name="cancel" type="submit" value="Cancel" />

这是提交处理程序：

submitHandler: function(form) {
                    form.submit();
                    }

谢谢

Answer 1

您不想在 jQuery Validate 插件中使用外部或额外的 click 处理程序是正确的，因为该插件已经通过其 submitHandler 回调自动捕获 submit click 事件。

您的问题是您实际上没有“取消”按钮。这只不过是重复的submit 按钮...

<input name="cancel" type="submit" value="Cancel" />

无论您做什么，该插件始终会将其click 事件视为常规表单提交。如果将其更改为<button></button> 会怎样？还是不行。该插件还将button 的click 事件视为常规表单提交。该插件没有内置其他回调函数/选项可以捕获任何其他类型的按钮/取消click事件。

您唯一的选择是将其放在您的<form></form> 标记之外。 Valdiate 插件不会看到它，然后您可以将自己的 click 事件绑定到它。

你自己的cancel点击事件：

$('[name="cancel"]').click(function() {
    // your code that handles a cancel click
});

使用<input type="submit"的演示：http://jsfiddle.net/wZwcQ/

使用<button></button>的演示：http://jsfiddle.net/h7XKc/

Answer 2

试试这个...

   $('#myform').validate({
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            field2: {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function (form) { // for demo
            alert('form submitted');
            return false;
        }
    });

    $(':submit').on('click', function () {
        if ($(this).attr('name') == 'submit') {
            $(this).closest('form').submit();
        }
    });

    $('[name="cancel"]').click(function () {
        // your code that handles a cancel click
        alert('form cancelled');
        return false;
    });

直播Example

您好。