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

时间:2016-03-17 12:24:11

标签: jquery jquery-validate

我有一个div元素,在这个元素中,有一个月份和年份的input个框。我要使用jquery validate进行验证。

  

validate事件中,我只想显示一个   label.error。例。如果月份标签可见年份标签隐藏   反之亦然。

因为当两个错误消息汇总在一起时,输入会增加并且看起来很奇怪。

Please find fiddle demo

  

请点击“提交”以查看消息。

$.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'
            }
        }
    });

});

1 个答案:

答案 0 :(得分:1)

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

:

<div id="error-msg">  

JSFiddle example