Function which tell whether the forms fields are empty or not

Question

I would like to get back a true or false based on visible form elements, but not just inputs but radio and checkboxes too. So far I have this code but something doesn't right. Once I filled in all the inputs it gives 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>

you display only one true or false, so you want to display the value for each control? — Frenchy, May 24 '21 at 14:42
I only want to display one true or false. True if all fields are filled. — levipadre, May 24 '21 at 14:44
its not possible with radios, only one could be checked if same attributes name so always false — Frenchy, May 24 '21 at 14:47
Why not? With $('input[type="radio"]').is(':checked') it clearly gives you back a false if you don't check anything. — levipadre, May 24 '21 at 14:50

Frenchy · Accepted Answer · 2021-05-24T16:25:31.557

I suggest you to use every : the loop returns true if all tests are true and stops at the first 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

1 Answers1