Question

我通过jquery验证插件验证插件和元数据插件

一切都很完美，只有在验证时它会将所有标签变为红色而不是仅仅转动相关字段的标签。

                     <label id="jform_first_name-lbl" for="jform_first_name" class="hasTooltip required" title="">First name<span class="star">&#160;*</span></label>  
                     <input type="text" name="jform[first_name]" id="jform_first_name" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />      

                <label id="jform_surname-lbl" for="jform_surname" class="hasTooltip required" title="">Surname<span class="star">&#160;*</span></label>                    
                <input type="text" name="jform[surname]" id="jform_surname" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />        

                <label id="jform_mobile-lbl" for="jform_mobile" class="hasTooltip required" title="">Mobile<span class="star">&#160;*</span></label>                    
                <input type="text" name="jform[mobile]" id="jform_mobile" value="" class="numeric fild {rules:{required:true}}" size="30" required aria-required="true" />

和下面的js：

 jQuery(document).ready(    
function(){

    var returnVar = '';



    jQuery("#member-profile").validate(
    {  
    meta: "rules", 
    submitHandler: function(form) { 

returnVar = '';
    form.submit();

    },


errorElement: "span",
errorPlacement: function(error, element) {
  //  element.siblings("label").append(error);
},

highlight: function(element) {
    jQuery(element).siblings("label").addClass("error");
    returnVar = 'fal';
},

unhighlight: function(element) {
    jQuery(element).siblings("label").removeClass("error");
}

 } );

我知道它基本上与此有关：

   highlight: function(element) {
    jQuery(element).siblings("label").addClass("error");
    returnVar = 'fal';
},

那么如何确保只突出显示输入前面的标签？

非常感谢！

Answer 1

如果这是您的html的样子，那么jQuery(element).siblings("label")会选择所有标签，因为它们都包含在同一个元素中，因此是彼此的兄弟姐妹。为了防止这种情况，您应该将所有标签+输入对放入它们自己的元素中，如此

<div>
    <label id="jform_first_name-lbl" for="jform_first_name" class="hasTooltip required" title="">First name<span class="star">&#160;*</span></label>  
    <input type="text" name="jform[first_name]" id="jform_first_name" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />      
</div>
<div>
    <label id="jform_surname-lbl" for="jform_surname" class="hasTooltip required" title="">Surname<span class="star">&#160;*</span></label>                    
    <input type="text" name="jform[surname]" id="jform_surname" value="" class="fild {rules:{required:true}}" size="30" required aria-required="true" />        
</div>
<div>
    <label id="jform_mobile-lbl" for="jform_mobile" class="hasTooltip required" title="">Mobile<span class="star">&#160;*</span></label>                    
    <input type="text" name="jform[mobile]" id="jform_mobile" value="" class="numeric fild {rules:{required:true}}" size="30" required aria-required="true" />
</div>

或者，您可以将siblings更改为https://api.jquery.com/prev/

jquery验证仅突出显示标签

1 个答案: