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

【问题标题】："If" condition Jquery - Validate empty fields“如果”条件 Jquery - 验证空字段
【发布时间】：2014-01-23 20:30:20
【问题描述】：

我正在尝试通过我自己的两个字段进行验证。当它们为空时，我想显示一条消息。

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

这是 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);
    }   
});

提前致谢。

【问题讨论】：

你能定义“不工作”吗？
将|| 更改为&&，它应该可以工作。您在两个不同的条件中定义了两个相同的条件。您的逻辑是错误的。
你显然不明白|| 和&& 之间的区别。这对程序员来说是一个非常基本的误解。
你检查长度小于 1 和长度大于 1。那么长度正好等于 1 呢？
巴尔玛，你是对的！我犯了一个愚蠢的错误。谢谢！

标签： jquery validation if-statement conditional-statements

【解决方案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。

如果您需要，请告诉我。

【讨论】：

感谢 Stefanos，我犯了这个错误，你向我解释得很好。但是现在当我改变 ||在 wordpress 中使用 && 它不起作用。为什么？
你能告诉我们你点击的#telecomBusNext元素是什么吗，也许我会做一个小提琴来告诉你怎么做。
是的，当然。这是一个简单的提交按钮。当您单击它时，您提交并转到下一页。这是代码：问题是 & 符号在Wordpress，我不知道为什么。我写了 $$ （两个＆符号），但它变成了 &&
您希望隐藏两个跨度，如果输入为空则显示？当输入获得一个值时，您希望跨度再次隐藏？我理解正确吗？
Stefanos 很简单。它只是验证两个输入。如果两者都为空，则显示两条消息，如果其中一条为空，则显示一条消息，如果它们不为空，则转到下一页。

【解决方案2】：

您的代码的问题在于，您使用 || (OR)，而您应该使用 && (AND)`。

但是为什么要检查所有的组合来让它变得如此复杂呢？分别检查这两个字段会容易得多：

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

【讨论】：

谢谢 Barmar，但是以你的方式......“return false”会发生什么。
你知道为什么在 Wordpress 中 & 符号不起作用吗？我正在努力寻找解决方案，但我什么也没找到……
抱歉，我对 Wordpress 一无所知。