Return false 似乎不会中断 jQuery 中的这个 each() 循环

Question

我正在尝试使用 jQuery 验证表单。

我正在用 each() 循环 table 中的所有输入。单击保存按钮时，如果一个输入为空，则输入应将边框颜色更改为红色。如果所有输入都不为空，则面板应动画显示并显示警告消息。但出于某种原因，如果您将任何输入留空，两种情况（if 和 else）都会发生。请参考jsfiddle。

通过添加 return false 以在满足 if 语句后立即退出 each 循环来修复其他类似的帖子，但它对我不起作用。你能帮我理解我做错了什么吗？谢谢！

https://jsfiddle.net/KlaytonJames/rvh9Lwn0/5/

$(document).ready(function() {
  $("button.edit").on("click", function() {
    $(this).parents(".panel").addClass("rotate");
    $(this).parents("tr").addClass("editable");
  })
  $("button.save").on("click", function() {
    $("table input").each(function() {
      var ret = true;
      if ($(this).val() == '') {
        $(this).addClass("error");
        ret = false;
        return false;
      } else {
        $(this).removeClass("error").parents(".panel").removeClass("rotate");
        $("table tr").removeClass("editable");
        $(".alertbox").addClass("show");
      }
      return ret;
    });
  })
})

$(document).ready(function() {
  $("button.edit").on("click", function() {
    $(this).parents(".panel").addClass("rotate");
    $(this).parents("tr").addClass("editable");
  })
  $("button.save").on("click", function() {
    $("table input").each(function() {
      var ret = true;
      if ($(this).val() == '') {
        $(this).addClass("error");
        ret = false;
        return false;
      } else {
        $(this).removeClass("error").parents(".panel").removeClass("rotate");
        $("table tr").removeClass("editable");
        $(".alertbox").addClass("show");
      }
      return ret;
    });
  })
})

* {
 box-sizing: border-box;
 position: relative;
 transition: all 0.3s linear;
}

.panel {
 padding: 20px;
 background: pink;
}

.panel table {
 border: 0;
 width: 100%;
}

.panel table th, .panel table td {
 border: 0;
 padding: 10px;
 color: #000;
 font-size: 14px;
 text-align: left;
}

.panel table th {
 background: lightblue;
 font-weight: 400;
}

.panel table td {
 border-bottom: 1px solid #aaa;
}

.panel table input {
 background: none;
 padding: 0;
 border-radius: 0;
 border: 1px solid transparent;
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 color: #000;
 width: 100%;
 pointer-events: none;
}

.panel table input.error {
 border-color: red;
}

.panel table button {
 background: none;
 padding: 0;
 border: 0;
 border-radius: 0;
 transition: none;
}

.panel table button svg {
 fill: blue;
 width: 20px;
 height: 20px;
}

.panel table button.save {
 display: none;
}

.panel table .editable input {
 background: #fff;
 padding: 3px;
 border-radius: 2px;
 pointer-events: all;
}

.panel table .editable button.edit {
 display: none;
}

.panel table .editable button.save {
 display: block;
}

.panel.rotate {
 transform: rotateX(180deg);
}

.panel.rotate .content {
 transform: rotateX(-180deg);
}

.alertbox {
 position: fixed;
 bottom: 15px;
 left: 15px;
 right: 15px;
 border: 3px solid green;
 padding: 20px;
 background: #ccc;
 opacity: 0;
}

.alertbox p {
 color: green;
 margin: 0;
 text-align: center;
}

.alertbox.show {
 opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel">
  <div class="content">

    <!-- users details -->
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th colspan="2">Mobile</th>
      </tr>
      <tr>
        <form>
          <td>1</td>
          <td><input type="text" value="TestUser1" required></td>
          <td><input type="email" value="t1@gmail.com" required></td>
          <td><input type="tel" value="01234567" required></td>
          <td>
            <button type="button" class="edit">
              <svg
                   xmlns:dc="http://purl.org/dc/elements/1.1/"
                   xmlns:cc="http://creativecommons.org/ns#"
                   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                   xmlns:svg="http://www.w3.org/2000/svg"
                   xmlns="http://www.w3.org/2000/svg"
                   id="svg8"
                   version="1.1"
                   viewBox="0 0 2.8923135 2.8889544"
                   height="2.8889544mm"
                   width="2.8923135mm">
                <defs id="defs2" />
                <metadata id="metadata5">
                  <rdf:RDF>
                    <cc:Work rdf:about="">
                      <dc:format>image/svg+xml</dc:format>
                      <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                      <dc:title></dc:title>
                    </cc:Work>
                  </rdf:RDF>
                </metadata>
                <g
                   transform="translate(-155.79194,-151.16862)"
                   id="layer1">
                  <path
                        style="fill-opacity:1;stroke-width:1"
                        d="m 155.79225,154.05316 c 0,-0.0116 0.1084,-0.72009 0.1107,-0.72219 0,-0.001 0.142,0.13769 0.313,0.30864 0.1711,0.17094 0.3092,0.31081 0.307,0.31081 -0.01,0 -0.1649,0.0244 -0.3615,0.0543 -0.3941,0.0598 -0.3692,0.0565 -0.3692,0.0485 z m 0.4994,-0.49705 -0.3149,-0.31473 0.8777,-0.87709 0.8777,-0.8771 0.047,0.0468 0.047,0.0468 -0.8327,0.83223 -0.8327,0.83223 0.044,0.0432 0.044,0.0432 0.8325,-0.83187 0.8324,-0.83186 0.2262,0.22607 0.2263,0.22608 -0.8761,0.8754 c -0.4817,0.48148 -0.8774,0.87541 -0.8795,0.87541 -0.01,0 -0.1454,-0.14163 -0.3185,-0.31473 z m 1.8388,-1.83784 -0.3149,-0.31493 0.1014,-0.0998 c 0.1247,-0.12282 0.1461,-0.13492 0.2389,-0.13492 0.1028,0 0.1122,0.006 0.3228,0.21851 0.2038,0.20518 0.2056,0.20794 0.2056,0.31324 0,0.088 -0.014,0.11167 -0.1329,0.23332 -0.054,0.0547 -0.1,0.0995 -0.1018,0.0995 -0.01,0 -0.1459,-0.14172 -0.3191,-0.31493 z"
                        id="path1576" />
                </g>
              </svg>
            </button>
            <button type="submit" class="save">
              <svg
                   xmlns:dc="http://purl.org/dc/elements/1.1/"
                   xmlns:cc="http://creativecommons.org/ns#"
                   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                   xmlns:svg="http://www.w3.org/2000/svg"
                   xmlns="http://www.w3.org/2000/svg"
                   id="svg8"
                   version="1.1"
                   viewBox="0 0 2.892 2.9046745"
                   height="2.9046745mm"
                   width="2.892mm">
                <defs id="defs2" />
                <metadata id="metadata5">
                  <rdf:RDF>
                    <cc:Work rdf:about="">
                      <dc:format>image/svg+xml</dc:format>
                      <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                      <dc:title></dc:title>
                    </cc:Work>
                  </rdf:RDF>
                </metadata>
                <g
                   transform="translate(-155.64888,-150.73435)"
                   id="layer1">
                  <path
                        id="path1859"
                        d="m 155.84388,153.6352 c -0.06,-0.003 -0.084,-0.007 -0.099,-0.0172 -0.037,-0.0231 -0.061,-0.0496 -0.079,-0.0845 l -0.017,-0.0337 v -1.31508 -1.31507 l 0.015,-0.0284 c 0.022,-0.0421 0.062,-0.0801 0.098,-0.0943 0.024,-0.009 0.054,-0.0126 0.1218,-0.0126 h 0.089 v 0.52835 c 0.01,0.58758 0,0.55014 0.052,0.58155 0.022,0.0136 0.044,0.0139 0.9397,0.0139 0.8963,0 0.9174,-3.8e-4 0.9397,-0.0139 0.051,-0.0315 0.048,0.006 0.052,-0.58155 v -0.52835 l 0.092,1.7e-4 c 0.083,1.3e-4 0.096,0.002 0.1257,0.0168 0.044,0.0221 0.3269,0.30569 0.3501,0.35045 l 0.017,0.0321 v 1.18094 1.18093 l -0.015,0.0323 c -0.019,0.041 -0.055,0.0766 -0.095,0.0957 l -0.032,0.0149 -1.2416,3.7e-4 c -0.6829,1.6e-4 -1.2771,-0.001 -1.3204,-0.004 z m 2.373,-0.81268 v -0.54839 l -0.016,-0.0242 c -0.01,-0.0133 -0.03,-0.0315 -0.048,-0.0403 l -0.032,-0.0161 h -1.0244 -1.0245 l -0.032,0.0161 c -0.017,0.009 -0.038,0.027 -0.049,0.0403 l -0.016,0.0242 v 0.54839 0.54838 h 1.1202 1.1204 z m -1.9623,0.30399 c -0.038,-0.0259 -0.053,-0.0508 -0.053,-0.0898 0,-0.0424 0.019,-0.0774 0.053,-0.0973 0.024,-0.0144 0.032,-0.0145 0.8417,-0.0145 0.9137,0 0.8444,-0.004 0.8782,0.0508 0.031,0.0504 0.015,0.11619 -0.035,0.15079 l -0.024,0.0161 h -0.8185 -0.8185 z m 0.01,-0.47095 c -0.041,-0.0202 -0.068,-0.07 -0.061,-0.10807 0.01,-0.0342 0.033,-0.07 0.062,-0.0846 0.023,-0.0118 0.075,-0.0124 0.8431,-0.0106 l 0.8184,0.002 0.02,0.015 c 0.068,0.0508 0.062,0.14909 -0.011,0.18655 l -0.032,0.0161 h -0.8032 -0.8033 z m -0.066,-1.01613 c 0,-0.003 -0.01,-0.20661 -0.01,-0.4532 v -0.44835 h 0.2427 0.2426 v 0.45132 0.45132 l -0.236,0.002 c -0.1299,0.001 -0.2381,-3.7e-4 -0.2409,-0.003 z m 0.6991,-2e-5 c 0,-0.003 -0.01,-0.20658 -0.01,-0.45317 v -0.44836 h 0.4282 0.4282 v 0.45132 0.45132 l -0.4215,0.002 c -0.2318,7.3e-4 -0.4237,-3.7e-4 -0.4264,-0.003 z"
                        style="fill-opacity:1;stroke-width:1" />
                </g>
              </svg>
            </button>
          </td>
        </form>
      </tr>
    </table>
  </div>
</div>

<!-- success message -->
<div class="alertbox">
  <p>Your changes have been saved</p>
</div>

Answer 1

首先用filter找出哪些输入为空。如果该集合有 length > 0，那么这些输入就有问题 - 为每个输入添加 error class。否则，遍历所有输入并删除 rotate class:

$("button.edit").on("click", function() {
  $(this).parents(".panel").addClass("rotate");
  $(this).parents("tr").addClass("editable");
})
$("button.save").on("click", function() {
  const $inputs = $("table input");
  $inputs.each(function() {
    $(this).removeClass("error");
  });
  const $emptyInputs = $inputs.filter((_, input) => input.value === '');
  if ($emptyInputs.length > 0) {
    $emptyInputs.each(function() {
      $(this).addClass("error");
    });
  } else {
    $($inputs[0]).closest(".panel").removeClass("rotate");
    $("table tr").removeClass("editable");
    $(".alertbox").addClass("show");

    // if you want to submit the form when the form is validated, remove this line:
    return false;
  }
});

https://jsfiddle.net/hymjknta/

$("button.edit").on("click", function() {
  $(this).parents(".panel").addClass("rotate");
  $(this).parents("tr").addClass("editable");
})
$("button.save").on("click", function() {
  const $inputs = $("table input");
  $inputs.each(function() {
    $(this).removeClass("error");
  });
  const $emptyInputs = $inputs.filter((_, input) => input.value === '');
  if ($emptyInputs.length > 0) {
    $emptyInputs.each(function() {
      $(this).addClass("error");
    });
  } else {
    $($inputs[0]).closest(".panel").removeClass("rotate");
    $("table tr").removeClass("editable");
    $(".alertbox").addClass("show");

    // if you want to submit the form when the form is validated, remove this line:
    return false;
  }
});

* {
 box-sizing: border-box;
 position: relative;
 transition: all 0.3s linear;
}

.panel {
 padding: 20px;
 background: pink;
}

.panel table {
 border: 0;
 width: 100%;
}

.panel table th, .panel table td {
 border: 0;
 padding: 10px;
 color: #000;
 font-size: 14px;
 text-align: left;
}

.panel table th {
 background: lightblue;
 font-weight: 400;
}

.panel table td {
 border-bottom: 1px solid #aaa;
}

.panel table input {
 background: none;
 padding: 0;
 border-radius: 0;
 border: 1px solid transparent;
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 color: #000;
 width: 100%;
 pointer-events: none;
}

.panel table input.error {
 border-color: red;
}

.panel table button {
 background: none;
 padding: 0;
 border: 0;
 border-radius: 0;
 transition: none;
}

.panel table button svg {
 fill: blue;
 width: 20px;
 height: 20px;
}

.panel table button.save {
 display: none;
}

.panel table .editable input {
 background: #fff;
 padding: 3px;
 border-radius: 2px;
 pointer-events: all;
}

.panel table .editable button.edit {
 display: none;
}

.panel table .editable button.save {
 display: block;
}

.panel.rotate {
 transform: rotateX(180deg);
}

.panel.rotate .content {
 transform: rotateX(-180deg);
}

.alertbox {
 position: fixed;
 bottom: 15px;
 left: 15px;
 right: 15px;
 border: 3px solid green;
 padding: 20px;
 background: #ccc;
 opacity: 0;
}

.alertbox p {
 color: green;
 margin: 0;
 text-align: center;
}

.alertbox.show {
 opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel">
  <div class="content">

    <!-- users details -->
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th colspan="2">Mobile</th>
      </tr>
      <tr>
        <form>
          <td>1</td>
          <td><input type="text" value="TestUser1" required></td>
          <td><input type="email" value="t1@gmail.com" required></td>
          <td><input type="tel" value="01234567" required></td>
          <td>
            <button type="button" class="edit">
              <svg
                   xmlns:dc="http://purl.org/dc/elements/1.1/"
                   xmlns:cc="http://creativecommons.org/ns#"
                   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                   xmlns:svg="http://www.w3.org/2000/svg"
                   xmlns="http://www.w3.org/2000/svg"
                   id="svg8"
                   version="1.1"
                   viewBox="0 0 2.8923135 2.8889544"
                   height="2.8889544mm"
                   width="2.8923135mm">
                <defs id="defs2" />
                <metadata id="metadata5">
                  <rdf:RDF>
                    <cc:Work rdf:about="">
                      <dc:format>image/svg+xml</dc:format>
                      <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                      <dc:title></dc:title>
                    </cc:Work>
                  </rdf:RDF>
                </metadata>
                <g
                   transform="translate(-155.79194,-151.16862)"
                   id="layer1">
                  <path
                        style="fill-opacity:1;stroke-width:1"
                        d="m 155.79225,154.05316 c 0,-0.0116 0.1084,-0.72009 0.1107,-0.72219 0,-0.001 0.142,0.13769 0.313,0.30864 0.1711,0.17094 0.3092,0.31081 0.307,0.31081 -0.01,0 -0.1649,0.0244 -0.3615,0.0543 -0.3941,0.0598 -0.3692,0.0565 -0.3692,0.0485 z m 0.4994,-0.49705 -0.3149,-0.31473 0.8777,-0.87709 0.8777,-0.8771 0.047,0.0468 0.047,0.0468 -0.8327,0.83223 -0.8327,0.83223 0.044,0.0432 0.044,0.0432 0.8325,-0.83187 0.8324,-0.83186 0.2262,0.22607 0.2263,0.22608 -0.8761,0.8754 c -0.4817,0.48148 -0.8774,0.87541 -0.8795,0.87541 -0.01,0 -0.1454,-0.14163 -0.3185,-0.31473 z m 1.8388,-1.83784 -0.3149,-0.31493 0.1014,-0.0998 c 0.1247,-0.12282 0.1461,-0.13492 0.2389,-0.13492 0.1028,0 0.1122,0.006 0.3228,0.21851 0.2038,0.20518 0.2056,0.20794 0.2056,0.31324 0,0.088 -0.014,0.11167 -0.1329,0.23332 -0.054,0.0547 -0.1,0.0995 -0.1018,0.0995 -0.01,0 -0.1459,-0.14172 -0.3191,-0.31493 z"
                        id="path1576" />
                </g>
              </svg>
            </button>
            <button type="submit" class="save">
              <svg
                   xmlns:dc="http://purl.org/dc/elements/1.1/"
                   xmlns:cc="http://creativecommons.org/ns#"
                   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                   xmlns:svg="http://www.w3.org/2000/svg"
                   xmlns="http://www.w3.org/2000/svg"
                   id="svg8"
                   version="1.1"
                   viewBox="0 0 2.892 2.9046745"
                   height="2.9046745mm"
                   width="2.892mm">
                <defs id="defs2" />
                <metadata id="metadata5">
                  <rdf:RDF>
                    <cc:Work rdf:about="">
                      <dc:format>image/svg+xml</dc:format>
                      <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                      <dc:title></dc:title>
                    </cc:Work>
                  </rdf:RDF>
                </metadata>
                <g
                   transform="translate(-155.64888,-150.73435)"
                   id="layer1">
                  <path
                        id="path1859"
                        d="m 155.84388,153.6352 c -0.06,-0.003 -0.084,-0.007 -0.099,-0.0172 -0.037,-0.0231 -0.061,-0.0496 -0.079,-0.0845 l -0.017,-0.0337 v -1.31508 -1.31507 l 0.015,-0.0284 c 0.022,-0.0421 0.062,-0.0801 0.098,-0.0943 0.024,-0.009 0.054,-0.0126 0.1218,-0.0126 h 0.089 v 0.52835 c 0.01,0.58758 0,0.55014 0.052,0.58155 0.022,0.0136 0.044,0.0139 0.9397,0.0139 0.8963,0 0.9174,-3.8e-4 0.9397,-0.0139 0.051,-0.0315 0.048,0.006 0.052,-0.58155 v -0.52835 l 0.092,1.7e-4 c 0.083,1.3e-4 0.096,0.002 0.1257,0.0168 0.044,0.0221 0.3269,0.30569 0.3501,0.35045 l 0.017,0.0321 v 1.18094 1.18093 l -0.015,0.0323 c -0.019,0.041 -0.055,0.0766 -0.095,0.0957 l -0.032,0.0149 -1.2416,3.7e-4 c -0.6829,1.6e-4 -1.2771,-0.001 -1.3204,-0.004 z m 2.373,-0.81268 v -0.54839 l -0.016,-0.0242 c -0.01,-0.0133 -0.03,-0.0315 -0.048,-0.0403 l -0.032,-0.0161 h -1.0244 -1.0245 l -0.032,0.0161 c -0.017,0.009 -0.038,0.027 -0.049,0.0403 l -0.016,0.0242 v 0.54839 0.54838 h 1.1202 1.1204 z m -1.9623,0.30399 c -0.038,-0.0259 -0.053,-0.0508 -0.053,-0.0898 0,-0.0424 0.019,-0.0774 0.053,-0.0973 0.024,-0.0144 0.032,-0.0145 0.8417,-0.0145 0.9137,0 0.8444,-0.004 0.8782,0.0508 0.031,0.0504 0.015,0.11619 -0.035,0.15079 l -0.024,0.0161 h -0.8185 -0.8185 z m 0.01,-0.47095 c -0.041,-0.0202 -0.068,-0.07 -0.061,-0.10807 0.01,-0.0342 0.033,-0.07 0.062,-0.0846 0.023,-0.0118 0.075,-0.0124 0.8431,-0.0106 l 0.8184,0.002 0.02,0.015 c 0.068,0.0508 0.062,0.14909 -0.011,0.18655 l -0.032,0.0161 h -0.8032 -0.8033 z m -0.066,-1.01613 c 0,-0.003 -0.01,-0.20661 -0.01,-0.4532 v -0.44835 h 0.2427 0.2426 v 0.45132 0.45132 l -0.236,0.002 c -0.1299,0.001 -0.2381,-3.7e-4 -0.2409,-0.003 z m 0.6991,-2e-5 c 0,-0.003 -0.01,-0.20658 -0.01,-0.45317 v -0.44836 h 0.4282 0.4282 v 0.45132 0.45132 l -0.4215,0.002 c -0.2318,7.3e-4 -0.4237,-3.7e-4 -0.4264,-0.003 z"
                        style="fill-opacity:1;stroke-width:1" />
                </g>
              </svg>
            </button>
          </td>
        </form>
      </tr>
    </table>
  </div>
</div>

<!-- success message -->
<div class="alertbox">
  <p>Your changes have been saved</p>
</div>

您也可以考虑增大边框宽度 - 1px 红色可能不足以让用户注意到。

Return false 似乎不会中断 jQuery 中的这个 each() 循环

Return false doesn't seem to interrupt this each() loop in jQuery

each

jquery

if-statement

return