JavaScript returns false 但仍在提交

Question

这里是HTML:

<form method="post" action="http://localhost:8080/center/add" onsubmit="return validate()">
  <div class="col-lg-12">
    <table id="myTable">
      <thead>
        <tr>
          <td>
            Start Time
          </td>
          <td>
            End Time
          </td>
          <td>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr class="t-row" title="" style="background: rgb(255, 255, 255);">
          <td>
            <input type="text" onfocus="clearError(this)" class="form-control time-box-width m-t-10px vTimeStart" name="vTimeStart[]" placeholder="Please enter start time in 24 hrs format">
          </td>
          <td>
            <input type="text" onfocus="clearError(this)" class="form-control time-box-width m-t-10px vTimeEnd" name="vTimeEnd[]" placeholder="Please enter end time in 24 hrs format">
          </td>
          <td>
            <input type="button" class="days-btn  m-t-10px" value="Delete">
          </td>
        </tr>
        <tr class="t-row" title="" style="background: rgb(255, 255, 255);">
          <td><input type="text" name="vTimeStart[]" placeholder="Please enter start time in 24 hrs format" onfocus="clearError(this)" class="vTimeStart form-control time-box-width m-t-10px"></td>
          <td><input onfocus="clearError(this)" type="text" name="vTimeEnd[]" placeholder="Please enter end time in 24 hrs format" value="" class="vTimeEnd form-control time-box-width m-t-10px"></td>
          <td><input type="button" value="Delete" class="days-btn  m-t-10px"></td>
        </tr>
      </tbody>
    </table>

    <div class="divide-div"></div>

  </div>
  <div class="modal-footer m-footer" style="border-top: 0;">
    <input class=" days-btn m-t-10px" id="submit" type="submit" value="Submit">
    <input class=" days-btn m-t-10px" id="close-popup" data-dismiss="modal" type="button" value="Close">
  </div>
</form>

JavaScript:

function validate() {

        $('.t-row').each(function(i, obj) {

          var currentStartTimeValue = $('#myTable .vTimeStart').eq(i).val();
          var currentEndTimeValue = $('#myTable .vTimeEnd').eq(i).val();

          if(currentStartTimeValue != '') {
            var v = valdateFormat(currentStartTimeValue);
            alert(v);
            if(!v) {
              alert('Please enter value in HH:MM format.');
              return false;
            }
          }

          if(currentEndTimeValue != '') {
            var v = valdateFormat(currentEndTimeValue);
            if(!v) {
              alert('Please enter value in HH:MM format.');
              return false;
            }
          }

          if(i > 0){
            var previousIndex = i - 1;
            var lastEndTimeValue = $('#myTable .vTimeEnd').eq(previousIndex).val();
            alert(currentStartTimeValue);
            var v = valdateFormat(currentStartTimeValue);
            if(currentStartTimeValue < lastEndTimeValue){
              $(this).attr('title','Current StartTime must be lesser than current EndTime!');
              alert('Current StartTime cannot be lesser than previous EndTime');
              return false;
            }
          }

          if(!currentStartTimeValue){
            var v = valdateFormat(currentStartTimeValue);
            if(!v) {
              alert('Please enter value in HH:MM format.');
              return false;
            }
            $(this).attr('title','Enter value for Start Time!');
            alert('Enter value for Start Time!');
            return false;
          } else if(!currentEndTimeValue){
            var v = valdateFormat(currentEndTimeValue);
            if(!v) {
              alert('Please enter value in HH:MM format.');
              return false;
            }
            $(this).attr('title','Enter value for End Time!');
            alert('Enter value for End Time!');
            return false;
          } else if(currentStartTimeValue >= currentEndTimeValue){
            $(this).attr('title','Current StartTime must be lesser than current EndTime!');
            alert('Current StartTime must be lesser than current EndTime');
            return false;
          }

          if(i === $('.t-row').length - 1) {
            // alert('All good!');
          }

        });

        // return true;

      }

我的表单正在动态添加 tr，只有一个按钮 add row to bottom。当我点击 Submit 按钮并且验证失败时，它仍然提交表单。

Answer 1

你的 validate 函数没有 return 任何东西。

return 语句属于传递给 .each 的匿名函数。

Answer 2

您的 return false 目前在 each 内 - returning 在 each 内不会导致父函数也 returning false.

改为在函数内部设置一个布尔值，然后在each结束后return，例如：

function validate() {
  let valid = true; // <-----------------
  $('.t-row').each(function(i, obj) {

    var currentStartTimeValue = $('#myTable .vTimeStart').eq(i).val();
    var currentEndTimeValue = $('#myTable .vTimeEnd').eq(i).val();

    if(currentStartTimeValue != '') {
      var v = valdateFormat(currentStartTimeValue);
      alert(v);
      if(!v) {
        alert('Please enter value in HH:MM format.');
        valid = false; // <-----------------
        return false;
      }
    }

    if(currentEndTimeValue != '') {
      var v = valdateFormat(currentEndTimeValue);
      if(!v) {
        alert('Please enter value in HH:MM format.');
        valid = false; // <-----------------
        return false;
      }
    }
    // ...
  });
  return valid; // <-----------------
}

你还需要在each里面return false，一旦发现问题立即终止循环。

Answer 3

您在每个循环中 return 计算值，而这又不允许您的 "validate()" 函数成为 return 值。您可以在函数中定义一个局部布尔变量，并根据您在循环内的条件更改其值，并在循环外 return 它。

见下方代码

function validate() {
  var returnedValue = true;
  $('.t-row').each(function(i, obj) {

    var currentStartTimeValue = $('#myTable .vTimeStart').eq(i).val();
    var currentEndTimeValue = $('#myTable .vTimeEnd').eq(i).val();

    if(currentStartTimeValue != '') {
      var v = valdateFormat(currentStartTimeValue);
      alert(v);
      if(!v) {
        alert('Please enter value in HH:MM format.');
        returnedValue = false;
      }
    }

    if(currentEndTimeValue != '') {
      var v = valdateFormat(currentEndTimeValue);
      if(!v) {
        alert('Please enter value in HH:MM format.');
        returnedValue = false;
      }
    }

    if(i > 0){
      var previousIndex = i - 1;
      var lastEndTimeValue = $('#myTable .vTimeEnd').eq(previousIndex).val();
      alert(currentStartTimeValue);
      var v = valdateFormat(currentStartTimeValue);
      if(currentStartTimeValue < lastEndTimeValue){
        $(this).attr('title','Current StartTime must be lesser than current EndTime!');
        alert('Current StartTime cannot be lesser than previous EndTime');
        returnedValue = false;
      }
    }

    if(!currentStartTimeValue){
      var v = valdateFormat(currentStartTimeValue);
      if(!v) {
        alert('Please enter value in HH:MM format.');
        returnedValue = false;
      }
      $(this).attr('title','Enter value for Start Time!');
      alert('Enter value for Start Time!');
      return false;
    } else if(!currentEndTimeValue){
      var v = valdateFormat(currentEndTimeValue);
      if(!v) {
        alert('Please enter value in HH:MM format.');
        returnedValue = false;
      }
      $(this).attr('title','Enter value for End Time!');
      alert('Enter value for End Time!');
      returnedValue = false;
    } else if(currentStartTimeValue >= currentEndTimeValue){
      $(this).attr('title','Current StartTime must be lesser than current EndTime!');
      alert('Current StartTime must be lesser than current EndTime');
      returnedValue = false;
    }

    if(i === $('.t-row').length - 1) {
      // alert('All good!');
    }

  });

  return returnedValue;

}```

JavaScript returns false 但仍在提交

JavaScript returns false but still it is submitting

javascript

codeigniter-3