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

Question

我有一个表单和 3 个输入类型提交按钮：返回、发送、搜索。 "back" 不应验证表单并返回，"send" 应仅验证电子邮件字段，"search" 应验证名字、姓氏和邮政编码。我一直在研究这个，但对我来说 update/assign 规则部分似乎有点冗长。也许有办法做得更好。我有一个可用的 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();
});

感谢您的帮助！

Answer 1

Use the .rules() methods and when the selector contains multiple elements, wrap it inside of a 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" 和 add/remove 和 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.

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

jquery validate plugin validate single form depending on submit input clicked

forms

jquery

jquery-validate

submit-button