2016-12-14 6 views
0

Функциональность:Неправильный результат для условия операторов проверить в if..else заявлении

Есть четыре различных полей в странице детали. В котором есть набор из 2 полей, каждый из которых должен быть заполнен, прежде чем пользователь сможет перейти к следующей странице.

Кроме того, существует условная проверка, чтобы убедиться, что набор из 2 полей из 2 наборов заполнен, прежде чем разрешить пользователям перейти на следующую страницу.

Следовательно, поток выглядит следующим образом:

[ЯВНО]

SET A: dropdownmenu_A & inputTEXTfield_A

заполнен

[OR]

SET B: dropdownmenu_B & inputTEXTfield_B

заполнена.

Условная проверка позволит пользователю перейти на следующую страницу.

Если какой-либо из них не заполнен, это не позволит пользователю прогрессировать.

Выпуск:

На данный момент, пользователи по-прежнему в состоянии представить и перейти от текущей страницы к следующей странице, даже несмотря на то, обязательные поля не заполнены. Это логика, которую я использовал для проверки (псевдокод)

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

Таким образом, следующее условие фактически должны проверить, если поля пусты или заполнены.

Где моя логика оператора пошла не так?

Код:

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

+0

Вы пытались использовать оператор === вместо этого? – DanielC

+1

Создайте [mcve] - ваш фрагмент не выполняется - например. вы не назначили проверку на событие отправки – mplungjan

+0

, пытались ли вы регистрировать '.val()' всех ваших полей, когда он возвращает true, чтобы вы могли видеть, какие значения были возвращены? если да, то что они возвращают? – haxxxton

ответ

0

Проблема в том, что ваш элемент 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> 
+0

Но ваша операционная логика заключается в том, что либо «dropDownShops_1», либо «ReceiptField_1» пуст AND «dropDownShops_2» «ИЛИ« ReceiptField_2 »пуст, а не« dropDownShops_1 »И« ReceiptField_1 »пуст И« «DropDownShops_2» «AND« ReceiptField_2 »?? Но, да, работает, но только, что это либо «dropDownShops_1», либо «ReceiptField_1» для установленного, который установлен. – Luke

+0

Я не думаю, что вы его получите: –

+0

Поскольку вы проверяете пустые значения, это работает, потому что если один из двух в наборе пуст, он возвращает true, но если ни один из ни одного из них не пуст, он возвращает false. –

0

Я думаю, что проблема, если оператор

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

Из кода, кажется, что невыделенная опция имеет значение «None», так $("yourselector").val() возвращает «None», а не пустая строка.

Смежные вопросы