1

と の 3 つの入力フィールド#product_upcが#product_priceあり#product_quantity、それらは同じ場所にあります。チェックボックスが#to_hideあり、ユーザーがチェックすると、3 つの入力が非表示になります (hide()メソッドを使用)。ユーザーがチェックボックスをオフにすると、3 つの入力が再び表示されます。今回はshow()メソッドを使用します (toggle()代わりに use を使用することもできますが、このアプローチを使用することをお勧めします)。

ここで、フォームを送信するときに、これら 3 つの入力が表示されているかどうかを確認する必要があります。表示されている場合は、それらが空でないことを検証し、関数#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

修正 II: html 要素が表示されているかどうかを確認するには、最初にhide()またはを使用する必要がありshow()、次に を使用$('.panel1').is(':visible')して要素が表示されているかどうかを確認できます。ここを見てください。

修正済み:フィドルでこのコードを 見てください。

div が表示されている場合にのみ呼び出される検証関数を開発しました。

このフィールドに 2 つのクラスを使用し、可視クラスのみにイベントを関連付けることができます。

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 に答える