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

Question

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

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>

Answer 1

我建议你使用 every：循环 returns true 如果所有测试都为真并停止在第一个 false return

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>

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

Function which tell whether the forms fields are empty or not

jquery

input

filter

is-empty