Блог

Главная - Вопросы по программированию - Функция, которая определяет, являются ли поля форм пустыми или нет

Функция, которая определяет, являются ли поля форм пустыми или нет

#jquery #input #filter #is-empty

Вопрос:

Я хотел бы вернуть значение true или false на основе видимых элементов формы, но не только входных данных, но также радио и флажков. До сих пор у меня есть этот код, но что-то не так. Как только я заполнил все входные данные, это дает истину.

 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>

Комментарии:

1. вы отображаете только одно значение true или false, поэтому вы хотите отобразить значение для каждого элемента управления?

2. Я хочу отобразить только одну истину или ложь. Верно, если все поля заполнены.

3. это невозможно с радиоприемниками, можно проверить только один, если одно и то же имя атрибутов всегда ложно

4. Почему нет? С помощью $(‘ввод[тип=»радио»]’).is(‘:проверено’) он явно возвращает вам значение false, если вы ничего не проверяете.

Ответ №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>
Метки: , ,