Question

我正在试图通过我自己的两个领域进行验证。当它们是空的时我想表达一个信息。

问题是“if”条件没有正确执行，我不知道为什么。

这是HTML代码：

<div id="switchingform">
            <label for="currentsupplier">Who is your current supplier?</label>
            <input type="text" name="currentsupplier" id="currentsupplier"/><br />
            <span class="validateText" id="validateSupplier"><p>Please enter your      current supplier</p></span>

            <label for="postcode">What is your post code?</label>
            <input type="text" name="postcode" id="postcode"/><br />
            <span class="validateText" id="validatePostCode"><p>Please enter your post code</p></span>
</div>

这是JQUERY代码：

$("#telecomBusNext").click(function(){ 
    if($("#currentsupplier").val().length < 1 || $("#postcode").val().length < 1) { 
        $("#validateSupplier").fadeIn(400);
        $("#validatePostCode").fadeIn(400);
        return false;
    } else if($("#currentsupplier").val().length > 1 || $("#postcode").val().length < 1) {
        $("#validatePostCode").fadeIn(400);
        $("#validateSupplier").fadeOut(400);
        return false;  
    } else if($("#currentsupplier").val().length < 1 || $("#postcode").val().length > 1) {
        $("#validatePostCode").fadeOut(400);
        $("#validateSupplier").fadeIn(400);
        return false;  
    } else {
      $("#validateSupplier").fadeOut(400);
      $("#validatePostCode").fadeOut(400);
    }   
});

提前致谢。

Answer 1

使用||更改&&，它应该有效。你在两个不同的条件中定义了两个相同的条件。你的逻辑错了。

$("#telecomBusNext").click(function(){ 
    //THIS------------------------------------>   <--ALSO HERE ----------------->
    if($("#currentsupplier").val().length < 1 || $("#postcode").val().length < 1) { 
        $("#validateSupplier").fadeIn(400);
        $("#validatePostCode").fadeIn(400);
        return false;                                //<--AND HERE is the same----->
    } else if($("#currentsupplier").val().length > 1 || $("#postcode").val().length < 1) {
        $("#validatePostCode").fadeIn(400);
        $("#validateSupplier").fadeOut(400);
        return false;
     //AND THIS are the same when using || ----------> 
    } else if($("#currentsupplier").val().length < 1 || $("#postcode").val().length > 1) {
        $("#validatePostCode").fadeOut(400);
        $("#validateSupplier").fadeIn(400);
        return false;  
    } else {
      $("#validateSupplier").fadeOut(400);
      $("#validatePostCode").fadeOut(400);
    }   
});

因为两个条件都包含$("#currentsupplier").val().length < 1，并且在HERE情况下都包含$("#postcode").val().length < 1，如果其中一个为真，则Jquery不知道应该运行上面标记的两个操作中的哪一个。

编辑：

这是我创建的JSFiddle。

如果您需要，请告诉我。

Answer 2

代码的问题在于，当您使用||（AND）`时，您正在使用&&（OR）。

但是为什么通过检查所有组合使它变得如此复杂？分别检查两个字段，这将更容易：

$("#telecomBusNext").click(function(){ 
    var supplierValid = $("#currentsupplier").val().length > 0;
    var postcodeValid = $("#postcode").val().length > 0;
    $("#validateSupplier").fadeToggle(!supplierValid);
    $("#validatePostCode").fadeToggle(!postcodeValid);
    return supplierValid && postcodeValid;
});

“如果”条件Jquery - 验证空字段

2 个答案: