jquery 验证插件根据单击的提交输入验证单个表单答案

【问题标题】：jquery validate plugin validate single form depending on submit input clickedjquery 验证插件根据单击的提交输入验证单个表单
【发布时间】：2015-01-21 16:38:09
【问题描述】：

我有一个表单和 3 个输入类型的提交按钮：返回、发送、搜索。 “返回”不应该验证表单并带我回去，“发送”应该只验证电子邮件字段，“搜索”应该验证名字、姓氏和邮政编码。我一直在研究这个，但对我来说更新/分配规则部分似乎有点冗长。也许有一种方法可以做得更好。我有一个工作 jsfiddle：http://jsfiddle.net/1u7tb48L/ 这是我的javascript：

$("#formValConfirmIdEmail").validate({
        debug: true,
        rules: {
            emailLogin: {
                required: true
            },
            firstName: {
                required: true
            },
            lastName: {
                required: true
            },
            postCode: {
                required: true
            }
        },
        messages: {
            emailLogin: {
                required: 'Required'
            },
            firstName: {
                required: 'Required'
            },
            lastName: {
                required: 'Required'
            },
            postCode: {
                required: 'Required'
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        }
    });
// Update rules for send button
$('#formValConfirmIdEmail #sendBtn').on('click', function () {
    $('#emailLogin').rules('add', {
        required: true
    });
    $('#firstName').rules('remove');
    $('#lastName').rules('remove');
    $('#postCode').rules('remove');
    $('#firstName, #lastName, #postCode').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

// Update rules for search button
$('#formValConfirmIdEmail #searchBtn').on('click', function () {
    $('#firstName').rules('add', {
        required: true
    });
    $('#lastName').rules('add', {
        required: true
    });
    $('#postCode').rules('add', {
        required: true
    });
    $('#emailLogin').rules('remove');
    $('#emailLogin').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

感谢您的帮助！

【问题讨论】：

您已经描述了您的要求，但您没有解释问题。如果您只是询问另一种方法来做到这一点，那么不是真的。除了使用rules() 方法切换到add 和remove 规则之外，没有其他方法可以切换验证。
您可以使用 jQuery .each() 并稍微组合选择器：jsfiddle.net/1u7tb48L/2
是的，我正在考虑使用 each()。我尝试使用一个数组来存储所有元素，然后使用 each()，但它只适用于数组的第一个元素。陌生人
并不奇怪；它有点记录。使用此插件的任何方法时，仅考虑第一个匹配的元素。所以解决方法是使用.each()。检查my jsFiddle。

标签： jquery forms jquery-validate submit-button

【解决方案1】：

使用.rules()方法以及选择器包含多个元素，将其包裹在jQuery .each()。

$('#formValConfirmIdEmail #sendBtn').on('click', function () {
    $('#emailLogin').rules('add', 'required');
    $('#firstName, #lastName, #postCode').each(function () {
        $(this).rules('remove');
    });
    $('#firstName, #lastName, #postCode').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

演示：http://jsfiddle.net/1u7tb48L/4/

由于它只是一个简单的布尔规则，因此使用 class="required" 声明它并添加/删除 class 而不是使用 .rules() 方法。

$('#formValConfirmIdEmail #sendBtn').on('click', function () {
    $('#emailLogin').addClass('required');
    $('#firstName, #lastName, #postCode').removeClass('required').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

演示：http://jsfiddle.net/1u7tb48L/7/

注意：您的errorPlacement 函数有点多余，因为error.insertAfter(element) 已经是默认值。 Remove it entirely and the behavior is exactly the same.

【讨论】：

Sparky 的好建议。非常感谢:)