2 个相同的 class 元素一次只显示一个

Question

我有一个 div 元素，在这个元素中有 2 个 input 框表示月份和年份。为了验证，我使用了 jquery validate。

On validate event, I want to show only one label.error. Example. If month label is visible year label hidden and vice-versa.

因为当两个错误消息同时出现时，输入会增加，看起来很奇怪。

Please find fiddle demo

Please click on submit to see the message.

$.validator.setDefaults({
    errorPlacement: function(error, element) { 
        $(element).parents('.form-group').prepend(error);
    },
    submitHandler: function() {
    },
    invalidHandler: function(form, validator) {

        $('label.mylable').hide();
        $('label.error').show();

    }

});
$(document).ready(function() {      
    $("#login_details").validate({ 
        ignore: [],
        rules: { 
            login_expiryMonth: {
                required: true,
                digits: true,
                minlength:2,
                maxlength:2
            },
            login_expiryYear: {
                required: true,
                digits: true,
                minlength:2,
                maxlength:2
            },

        },
        messages:{

            login_expiryMonth: {
                required: 'Please enter a date',
                digits:   'Please enter a valid date',
                minlength:'Please enter a valid date',
                maxlength:'Please enter a valid date'
            },
            login_expiryYear: {
                required: 'Please enter a date',
                digits:   'Please enter a valid date',
                minlength:'Please enter a valid date',
                maxlength:'Please enter a valid date'
            }
        }
    });

});

Answer 1

您可以添加占位符元素，然后如果错误是针对其中一个文本框的，则改为填充占位符元素 -

<div id="error-msg">

errorPlacement: function(error, element) { 
    var id = $(element).prop('id');        
    if(id =='login_expiryMonth' || id == 'login_expiryYear') {
        $('#error-msg').html(error);
    }
    else {
        $(element).parents('.form-group').prepend(error);
    }
}

JSFiddle example

2 个相同的 class 元素一次只显示一个

2 same class elements show only one at a time

jquery

jquery-validate