判断表单字段是否为空的函数答案

【问题标题】：Function which tell whether the forms fields are empty or not判断表单字段是否为空的函数
【发布时间】：2021-05-24 14:31:10
【问题描述】：

我想根据可见的表单元素返回真或假，但不仅仅是输入，还有单选和复选框。到目前为止，我有这段代码，但有些不对劲。一旦我填写了所有输入，它就会给出真实的结果。

function isAllFilled() {
  return $('.en__mandatory .form-control:visible').filter(function() {
      if($(this).attr('type') == 'checkbox' || $(this).attr('type') == 'radio') {
          return $(this).is(':checked').length == 0
      } else {
          return $(this).val().length == 0
      }
   }).length == 0
}

$('.form-control').on('input', function(){
  console.log(isAllFilled());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form novalidate>
  <div class="en__field en__field--text en__mandatory">
      <div class="en__field__element">
          <input id="en__field_supporter_firstName" type="text" class="en__field__input en__field__input--text form-control" name="supporter.firstName" placeholder="First Name" autocomplete="given-name">
        </div>
  </div>
  
  <div class="en__field en__field--lastName en__mandatory">
      <div class="en__field__element">
          <input id="en__field_supporter_lastName" type="text" class="en__field__input en__field__input--text form-control" name="supporter.lastName" placeholder="Last Name" autocomplete="family-name">
      </div>
  </div>
  
  <div class="en__field en__field--radio en__mandatory">
      <div class="en__field__element">
          <div class="en__field__item custom-control custom-radio custom-control-inline">
              <input id="en__field_supporter_questions_1608560" type="radio" class="en__field__input en__field__input--radio form-control custom-control-input" value="Y" name="supporter.questions.160856">
              <label for="en__field_supporter_questions_1608560" class="en__field__label en__field__label--item custom-control-label">Yes, I'm in</label>
          </div>
          <div class="en__field__item custom-control custom-radio custom-control-inline">
              <input id="en__field_supporter_questions_1608561" type="radio" class="en__field__input en__field__input--radio form-control custom-control-input" value="N" name="supporter.questions.160856">
              <label for="en__field_supporter_questions_1608561" class="en__field__label en__field__label--item custom-control-label">No</label>
        </div>
    </div>
  </div>
</form>

【问题讨论】：

你只显示一个真假，所以要显示每个控件的值？
我只想显示一个真假。如果所有字段都已填写，则为真。
它不可能用收音机，如果相同的属性名称只能检查一个，所以总是假的
为什么不呢？使用 $('input[type="radio"]').is(':checked') 如果你不检查任何东西，它显然会给你一个错误。

标签： jquery input filter is-empty

【解决方案1】：

我建议您使用 every ：如果所有测试都为真，则循环返回 true 并在第一个 false 返回时停止

function isAllFilled() {
  return $('.en__mandatory .form-control:visible').toArray().every(function(e) {
      if($(e).attr('type') == 'checkbox'){
         return $(e).is(':checked');
      } else if ($(e).attr('type') == 'radio') {
          // test if one radio at least (by group name) is checked
          let name = $(e).attr('name')
          return $(`[type=radio][name='${name}']`).is(':checked');
      } else if($(e).attr('type') == 'text'){
        return $(e).val().length > 0
      }
   })
}


$('.form-control').on('input', function(){
  console.log(isAllFilled());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form novalidate>
  <div class="en__field en__field--text en__mandatory">
      <div class="en__field__element">
          <input id="en__field_supporter_firstName" type="text" class="en__field__input en__field__input--text form-control" name="supporter.firstName" placeholder="First Name" autocomplete="given-name">
        </div>
  </div>
  
  <div class="en__field en__field--lastName en__mandatory">
      <div class="en__field__element">
          <input id="en__field_supporter_lastName" type="text" class="en__field__input en__field__input--text form-control" name="supporter.lastName" placeholder="Last Name" autocomplete="family-name">
      </div>
  </div>
  
  <div class="en__field en__field--radio en__mandatory">
      <div class="en__field__element">
          <div class="en__field__item custom-control custom-radio custom-control-inline">
              <input id="en__field_supporter_questions_1608560" type="radio" class="en__field__input en__field__input--radio form-control custom-control-input" value="Y" name="supporter.questions.160856">
              <label for="en__field_supporter_questions_1608560" class="en__field__label en__field__label--item custom-control-label">Yes, I'm in</label>
          </div>
          <div class="en__field__item custom-control custom-radio custom-control-inline">
              <input id="en__field_supporter_questions_1608561" type="radio" class="en__field__input en__field__input--radio form-control custom-control-input" value="N" name="supporter.questions.160856">
              <label for="en__field_supporter_questions_1608561" class="en__field__label en__field__label--item custom-control-label">No</label>
        </div>
    </div>
  </div>
</form>

【讨论】：