間違った結果は、if..else文で確認する

Question

機能：

詳細ページに4つの異なるフィールドがあります。そこには、ユーザが次のページにナビゲートできるようにするために、それぞれのフィールドを2つずつ設定する必要があります。

さらに、ユーザーが次のページに移動できるようにする前に、2セットの2つのフィールドのセットが満たされていることを確認するための条件付きチェックがあります。

したがって、流れは以下の通りである：

[EITHER]

セットA：dropdownmenu_A & inputTEXTfield_A

[OR]

を充填さ

SET B：ドロップダウンメニューB & inputTEXTfield_B

が入力されています。

条件付きチェックでは、次のページに移動できます。

いずれか一方が入力されていない場合は、そのユーザーは進行できません。

問題：

この時点で、ユーザーが必須フィールドが充填されていないにもかかわらず、まだ次のページに、現在のページから提出してナビゲートすることができます。これは、私がチェック（疑似コード）するために使用したロジックです。したがって、以下の条件は、フィールドが空であるか満たされているかを実際に確認する必要があります。

どこのオペレータロジックが間違っていますか？

コード：

// On Submit 
 

 
function SubmitReceiptDetails() { 
 
    idleTime = 0; 
 

 
    //Check for Input Field 
 
    if (($.trim($("#dropDownShops_1").val()) == "" && 
 
     $.trim($("#ReceiptField_1").val()) == "") || 
 
     ($.trim($("#dropDownShops_2").val()) == "" && 
 
     $.trim($("#ReceiptField_2").val()) == "")) { 
 

 
    console.log("Receipt_Field_Error wrong"); 
 
    alert("Your field is not filled"); 
 
    } else { 
 
    $('#PageA').fadeOut(); 
 
    $('#PageB').fadeIn(); 
 
    } 
 
}

<form> 
 

 
    <!-- DropDown Menu to choose Participating Outlet --> 
 
    <select id="dropDownShops_1"> 
 
    <option value="None" selected="Selected">Please Select Shops ...</option> 
 
    </select> 
 

 
    <input type="text" id="ReceiptField_1" style="z-index=10; position:absolute; top:390px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725; background: transparent;" autofocus> 
 

 
    <select id="dropDownShops_2"> 
 
    <option value="None" selected="Selected">Please Select Shops ...</option> 
 
    </select> 
 

 
    <input type="text" id="ReceiptField_2" style="z-index=10; position:absolute; top:585px; left:858px; height:58px; width:265px; outline:0; border: 0; font-size:25px; font-family:'Gothic'; color:#765725; background: transparent;"> 
 

 
</form>

Answer 1

問題は、option要素に 'None'という値があり、これを.val（）でチェックすると決して空ではないということです。また、代わりに：

if (($.trim($("#dropDownShops_1").val()) == "" && 
    $.trim($("#ReceiptField_1").val()) == "") || 
    ($.trim($("#dropDownShops_2").val()) == "" && 
    $.trim($("#ReceiptField_2").val()) == "")) { 
} 

これを試してみてください：

if (($.trim($("#dropDownShops_1").val()) == "" || 
    $.trim($("#ReceiptField_1").val()) == "") && 
    ($.trim($("#dropDownShops_2").val()) == "" || 
    $.trim($("#ReceiptField_2").val()) == "")) { 
} 

は、私はそれをテストし、それが動作します。 HTMLオプション要素：

<option value="" selected disabled>Please Select Shops ...</option> 

Answer 2

私は、問題はこれが

ようにする必要があり声明

if (($.trim($("#dropDownShops_1").val()) == "" && 
    $.trim($("#ReceiptField_1").val()) == "") || 
    ($.trim($("#dropDownShops_2").val()) == "" && 
    $.trim($("#ReceiptField_2").val()) == "")) 

場合であると思います

if ($.trim($("#dropDownShops_1").val() !== "" && 
     $.trim($("#ReceiptField_1").val() !== "" || 
    $.trim($("#dropDownShops_2").val() !== "" && 
     $.trim($("#ReceiptField_2").val() !== "") { 

       GO TO NEXT PAGE 

    } else { 
       SHOW ERROR 
    } 

それとも

if (($.trim($("#dropDownShops_1").val() == "" || 
     $.trim($("#ReceiptField_1").val() == "") && 
    ($.trim($("#dropDownShops_2").val() !== "" || 
     $.trim($("#ReceiptField_2").val() !== "")) { 

       SHOW ERROR 

    } else { 
       GO TO NEXT PAGE 
    } 

Answer 3

あなたのコードから、選択されていないオプションは、「なし」、そう$("yourselector").val()戻り、「なし」ではなく空の文字列の値を持っているようです。