javascript - 如何仅验证表单的可见元素？

Question

我有三个输入字段#product_upc、#product_price和#product_quantity，它们位于同一位置。我有一个复选框#to_hide，当用户选中它时，三个输入将被隐藏(使用hide()方法)。如果用户取消选中该复选框，则三个输入再次可见，这次使用 show() 方法(我可以使用 use toggle() 代替，但更喜欢使用这种方法) .

现在，当我提交表单时，我需要验证这三个输入是否可见，如果它们可见，则验证它们是否不为空，如果是 #product_upc，我应该检查 UPC 有效性通过调用 checkUPC(param) 函数。

我编写了这段代码，但它不起作用，因为元素是可见并且代码永远不会通过验证:

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