Question

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

现在，当我提交表单时，我需要验证这三个输入是否可见，如果它们是可见的，则验证它们不是空的，如果#product_upc，我应该通过调用{{{0}来检查UPC的有效性。 1}}功能。

我制作了这段代码，但由于元素为checkUPC(param)且代码永远无法通过验证，因此无法正常运行：

visible

我犯了哪个错误？

Answer 1

已修复II： 因此，您要检查html元素是否可见，首先需要使用hide()或show()，然后您可以使用$('.panel1').is(':visible')检查元素是否可见。看看here。

<强>固定：请查看小提琴上的this代码。

我开发了一个验证函数，只有在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!');
    }    
});

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

1 个答案: