要检查表单中的输入是否需要输入带有某些指令

时间:2018-03-09 12:01:26

标签: javascript jquery html angularjs

您好我想知道如果只使用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>
&#13;
&#13;
&#13;

但是从这开始我只知道输入类型或select和textarea的字段,我无法知道使用某些第三方或某些内置指令的字段(这里是uib-rating) 请帮我检查这些领域的必要性

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

但不适合第三方

1 个答案:

答案 0 :(得分:0)

如果您只是想知道是否所有这些都已填满:

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

<强>样本

&#13;
&#13;
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());
});
&#13;
<!-- 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>
&#13;
&#13;
&#13;