1

我有三个输入字段#product_upc，#product_price并且#product_quantity，它们在同一个地方。我有一个复选框#to_hide，当用户选中它时，三个输入隐藏（使用hide()方法）。如果用户取消选中复选框，则三个输入再次可见，这次使用show()方法（我可以使用 usetoggle()代替，但更喜欢使用这种方法）。

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

我制作了这段代码，但它不起作用，因为元素是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;
    }
}

我犯了哪个错误？

4

1 回答 1

1

固定二： 所以，要检查一个html元素是否可见，你首先需要使用hide()or show()，然后你可以使用$('.panel1').is(':visible')来检查一个元素是否可见。看看这里。

已修复： 请在 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!');
    }    
});
于 2013-09-25T20:38:00.573 回答