關於使用簡單驗證使用布爾值問題

Question

您能否看看This Demo並讓我知道爲什麼在驗證兩種類型的輸入選擇期間發生此錯誤？

從技術上講，如果用戶沒有選擇複選框和選擇選項，並按下提交按鈕錯誤信息出現，並且validRequest布爾值保留在false中，那麼情況就是如此。現在，如果用戶只選擇複選框的情況是一樣的validRequest布爾是false和錯誤信息顯示出來但如果用戶忘記選擇複選框，只有從列表中選擇validateQuery()驗證validRequest爲True，然後現在的錯誤信息和警告消息彈出！

您能否讓我知道爲什麼會發生這種情況？

$(function() { 
 
    var validRequest = false; 
 

 
    function validateQuery() { 
 

 
     var selectedDoll = $('input:checkbox[name=doll]'); 
 
     if ($(selectedDoll).is(':checked')) { 
 
      validRequest = true; 
 
      $('#err').html(''); 
 
     } else { 
 
      validRequest = false; 
 
      $('#err').html('Some Thing Wrong!'); 
 
     } 
 

 
     var selectedIcecream = $("#icecream").val(); 
 
     if (selectedIcecream == 0) { 
 
      validRequest = false; 
 
      $('#err').html('Some Thing Wrong!'); 
 
     } else { 
 
      validRequest = true; 
 
      $('#err').html(''); 
 
     } 
 
    } 
 

 
    $("#isValid").on("click", function() { 
 
     validateQuery(); 
 
     if(validRequest){ alert('Ready To Go');} 
 
      console.log(validRequest); 
 
    }); 
 

 
});

#err{color:red;}

<div> 
 
    <input type="checkbox" name="doll" value="cat" />Cats 
 
    <br /> 
 
    <input type="checkbox" name="doll" value="dog" />Dogs 
 
    <br /> 
 
    <input type="checkbox" name="doll" value="bird" />Birds 
 
    <br /> 
 
    <br /> 
 
    <select id="icecream"> 
 
     <option value="0">Select From List</option> 
 
     <option value="chocolate">Chocolate</option> 
 
     <option value="vanilla">Vanilla</option> 
 
     <option value="strawberry">Strawberry</option> 
 
     <option value="caramel">Caramel</option> 
 
    </select> 
 
</div> 
 
<p> 
 
    <input type="submit" id="isValid" value="Submit now" /> 
 
</p> 
 
<p> 
 
    <div id="err"></div> 
 
</p>

Answer 1

修正：http://jsfiddle.net/byk309j8/7/

的問題是，你有2個獨立的if語句，而你只能有一個。如果選擇框爲空== 0而不是不爲空!== 0

$(function() { 
var validRequest = false; 

function validateQuery() { 

    var selectedDoll = $('input:checkbox[name=doll]'); 
    var selectedIcecream = $("#icecream").val(); 

    // checkbox is not checked, but select is 
    if ($(selectedDoll).is(':checked') && selectedIcecream == 0) { 
     validRequest = false; 
     $('#err').html('select not selected'); 
    } else if ($(selectedDoll).is(':checked') == false && selectedIcecream != 0) { 
     validRequest = false; 
     $('#err').html('checkbox not checked'); 
    } else if ($(selectedDoll).is(':checked') == false || selectedIcecream == 0) { 
     validRequest = false; 
     $('#err').html('checkbox not checked or select not selected'); 
    } else { 
      validRequest = true; 
     $('#err').html(''); 
    } 
} 

$("#isValid").on("click", function() { 
    validateQuery(); 
    if(validRequest){ alert('Ready To Go');} 
     console.log(validRequest); 
}); 
}); 

<div> 
<input type="checkbox" name="doll" value="cat" />Cats 
<br /> 
<input type="checkbox" name="doll" value="dog" />Dogs 
<br /> 
<input type="checkbox" name="doll" value="bird" />Birds 
<br /> 
<br /> 
<select id="icecream"> 
    <option value="0">Select From List</option> 
    <option value="chocolate">Chocolate</option> 
    <option value="vanilla">Vanilla</option> 
    <option value="strawberry">Strawberry</option> 
    <option value="caramel">Caramel</option> 
</select> 
    </div> 
    <p> 
    <input type="submit" id="isValid" value="Submit now" /> 
    </p> 
     <p> 
<div id="err"></div> 
    </p> 

#err{color:red;}