Question

功能

详细信息页面中有四个不同的字段。其中，在用户可以导航到下一页之前，需要填充一组2个字段。

此外，还有一个条件检查，以确保在允许用户导航到下一页之前，已填充2组中的一组2个字段。

因此，流程如下：

[EITHER]

SET A：dropdownmenu_A＆amp; inputTEXTfield_A

已填写

[OR]

SET B：dropdownmenu_B＆amp; inputTEXTfield_B

已经填满。

条件检查将允许用户导航到下一页。

如果其中任何一个未填写，则不允许用户继续进行。

问题：

此时，即使未填写必填字段，用户仍可以提交当前页面并导航到下一页。这是我用来检查的逻辑（伪代码）

if((dropdownmenu_A is empty && inputTEXTfield_A is empty) OR 
   (dropdownmenu_B is empty && inputTEXTfield_B is empty))

因此，以下条件应该实际检查字段是空还是填充。

我的操作员逻辑在哪里出错了？

代码：

＆＃13;

// 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();
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

我认为问题出现在if语句

中

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 2

从您的代码中看来，未选中的选项的值为＆＃34;无＆＃34;，因此$("yourselector").val()返回＆＃34;无＆＃34;而不是一个空字符串。

Answer 3

问题是你的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>

条件运算符检查if..else语句的错误结果

3 个答案: