Возврат false, похоже, не прерывает этот цикл each () в jQuery

Question

Я пытаюсь проверить форму с помощью jQuery.

Я зацикливаю все входы в таблице с each(). Если нажать кнопку «Сохранить», если один из входов пуст, просто он должен изменить цвет границы на красный. Если все входные данные не пусты, панель должна анимироваться, и должно появиться предупреждающее сообщение. Но по какой-то причине, если вы оставите любой из входных данных пустым, оба условия (если и еще) выполняются. Пожалуйста, обратитесь к jsfiddle.

Другие подобные сообщения, такие как моя, исправлены добавлением return false, чтобы выйти из каждого цикла, как только встречается оператор if, но он не работает для меня. Можете ли вы помочь мне понять, что я делаю не так? Спасибо!

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 к каждому из них.В противном случае повторите все входные данные и удалите класс rotate:

$("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 красного цвета может быть недостаточно для того, чтобы пользователь заметил.