Question

请您查看This Demo并告诉我为什么在验证两种类型的输入选择期间会发生此错误？

从技术上讲，如果用户没有选中复选框和选择选项，并按下提交按钮，则会显示错误消息并且validRequest布尔值保留在false中。现在，如果用户只选择复选框，则情况相同，validRequest布尔值为false，如果用户忘记选中复选框并且仅从列表中选择，则错误消息显示 BUT 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/

问题是你有两个独立的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;}

通过简单验证使用布尔问题

1 个答案: