javascript - 使用 $.each 进行表单验证

Question

这是我的表单验证代码。这里 alert("validation done") 应该在验证每个输入后显示。但是它会返回每个输入。这里有什么问题吗？

var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.clickMe = function(){
debugger
   $form = $('#myForm');
        $form.find('div input.required').each(function () {debugger
            var $this = $(this)
            if ($this.val().trim() == '') {
                $(this).css('border', '1px solid red');
                return false;
            }
            return true;
        })
        
        alert("validation done")
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<form id="myForm" >
<div>
  <input type="text" class="required">
  <input type="date" class="required">
  <select class="required">
  <option>AAA</option>
  <option>BBB</option>
  </select>
</div>
</form>
<button ng-click="clickMe()">submit</button>
</div>

Answer 1

Here alert("validation done") should be displayed after validation of every inputs.

在这种情况下

• 此警报应位于each循环内
• $('#myFrom'); 应更改为 $('#myForm');
• 删除 if 内的 return false

演示

var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
  $scope.clickMe = function() {
    $form = $('#myForm');
    var isValid = true;
    $form.find('div input.required').each(function() {
      var $this = $(this)
      if ($this.val().trim() == '') {
        $(this).css('border', '1px solid red');
        isValid = false;
      }
      if (isValid) {
        alert("validation done"); //notice the change in placement of this alert
      }
      return true;
    })
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <form id="myForm">
    <div>
      <input type="text" class="required">
      <input type="date" class="required">
      <select class="required">
  <option>AAA</option>
  <option>BBB</option>
  </select>
    </div>
  </form>
  <button ng-click="clickMe()">submit</button>
</div>