jQuery驗證僅強調

我驗證通過jQuery的形式來驗證插件和元數據插件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'; 
},

所以如何我確保只有標籤直接輸入之前高亮顯示？

非常感謝！

來源

2014-04-30 user1745467

如果這是你的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/

來源

2014-04-30 09:00:43 Noino

非常感謝！ – user1745467

jQuery驗證僅強調

回答

相關問題