Question

我有一个表单和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();
});

感谢您的帮助！

Answer 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();
});

DEMO：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();
});

DEMO：http://jsfiddle.net/1u7tb48L/7/

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

jquery validate plugin根据单击的提交输入验证单个表单

1 个答案: