如何僅驗證表單的可見元素？

Question

我有三個輸入字段#product_upc，#product_price和#product_quantity，它們在同一個地方。我有一個複選框#to_hide，當用戶檢查它時，三個輸入將隱藏（使用hide()方法）。如果用戶取消選中該複選框，則三個輸入將再次可見，這次使用show()方法（我可以使用toggle()來代替，但傾向於使用此方法）。

現在，當我提交表單時，我需要驗證這三個輸入是否可見，如果它們是可見的，那麼驗證它們不是空的，並且在#product_upc的情況下，我應該通過調用checkUPC(param)函數來檢查UPC有效性。

我做了這個代碼，但它不工作，因爲元素visible和代碼永遠不會傳遞低谷驗證：

if (($("#product_upc").val() !== '' || $("#product_upc").val().length >= 0) && $("#product_upc").is(":visible")) { 
    if (checkUPC($("#product_upc").val()) === false) { 
     alert("El UPC es inválido"); 
     valid = false; 
     return false; 
    } 
} 

if ($("#product_price").is(":visible")) { 
    if (!$.trim($("#product_price")).length) { 
     alert("Debes escribir un precio"); 
     valid = false; 
     $(this).focus(); 
     return false; 
    } 
} 
if ($("#product_quantity").is(":visible")) { 
    if (!$.trim($("#product_quantity")).length) { 
     alert("Debes escribir una cantidad"); 
     valid = false; 
     $(this).focus(); 
     return false; 
    } 
} 

其中的錯誤，我做？

Answer 1

固定II： 所以，你要檢查一個HTML元素可見或不可見，你首先需要使用hide()或show()，那麼你可以使用$('.panel1').is(':visible')檢查元素是否可見或不可見。看看here。

固定： 請看看this code at fiddle。

我開發了一個驗證函數，僅當div可見時才被調用。

---

您可以對此字段使用兩個類，並僅將事件關聯到可見類。

Out Field<input type="text" /> </br> 
<div class="panel1"> 
    Field 1 <input type="text" /> </br> 
    Field 2 <input type="text" /> </br> 
    Field 3 <input type="text" /> </br> 
</div> 
<input type="checkbox" class="visible" checked=true>Visible</input></br> 
<input type="button" class="btnValidate" value="Validate"></input> 

用戶後，點擊可以將這個類更改爲invisibleCheckBox

那麼你該事件的類關聯：

$('.visible').click(function(){ 
    if ($(this).prop('checked')){ 
     $('.panel1').show(); 
    }else{ 
     $('.panel1').hide(); 
    } 

}); 

$('.btnValidate').click(function(){ 

    if ($('.panel1').is(':visible')) 
     alert('works'); 

    if ($(".visible").prop('checked')){ 
     console.log('validate!'); 
    }else{ 
     console.log('dont validate!'); 
    }  
});