检查表单内的输入是否需要某些指令的输入

Question

您好我想知道是否所有必填字段都填写在仅使用 jquery 的表单中 这个我试过了

 $('#form').find('input,select, textarea').each(function(){
                       if(!$(this).prop('required')){
                           console.log("NR");
                       } else {
                           console.log("IR");
                       }
                   });
                   
                   //but from this I got to know about only fields with input type or select and textarea, I am not able to know about the fields with uses some third party here the uib-rating

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
<div class="row" id="D_1">
 First name:<br>
  <input type="text" name="firstname" value="ab" ng-model="fname" required>
  <br>
  Last name:<br>
  <input type="text" name="lastname" value = "" required = "fname === 'abc'">
 
</div>
<div class="row" id="D_2">
 notes:<br>
  <input type="text" name="notes" >
</div>
<div class="row" id="D_3">
 <textarea name="tarea"></textarea>
 <span uib-rating titles=[] ng-model="" max="5" name="rating"
                on-leave="overStar = null"  ng-required="fname === 'abc'"></span>
</div>
</div>

但是从这里我只知道输入类型或选择和文本区域的字段，我无法知道使用一些第三方或一些内置指令的字段（这里是 uib-rating） 请帮我检查这些类型的字段是否需要

//I have already tried this:
 $('.form-field').each(function() {
    if ( $(this).val() === '' )
        isValid = false;
  });

但不为第三方工作

Answer 1

如果你只是想知道它们是否都被填满了：

function validateForm() {
  var isValid = true;
  $('#form').find('input:required,select:required, textarea:required').each(function() {
    if ($(this).val() === '')
      isValid = false;
  });
  return isValid;
}

演示

function validateForm() {
  var isValid = true;
  $('#form').find('input:required,select:required, textarea:required').each(function() {
    if ($(this).val() === '')
      isValid = false;
  });
  return isValid;
}

$(".validate").click(function() {
  console.log(validateForm());
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
  <div class="row" id="D_1">
    First name:<br>
    <input type="text" name="firstname" value="ab" ng-model="fname" required>
    <br> Last name:<br>
    <input type="text" name="lastname" value="" required="fname === 'abc'">

  </div>
  <div class="row" id="D_2">
    notes:<br>
    <input type="text" name="notes">
  </div>
  <div class="row" id="D_3">
    <textarea name="tarea"></textarea>
    <span uib-rating titles=[] ng-model="" max="5" name="rating" on-leave="overStar = null" ng-required="fname === 'abc'"></span>
  </div>
</div>

<button class="validate">validate</button>