Проверять только видимые поля с проверкой формы HTML5?

У меня есть две группы полей формы, и в каждой группе есть поля с обязательным атрибутом. Однако в зависимости от того, какой пользователь выбирает, одна группа может быть скрыта, и эти поля не должны включаться в проверку формы HTML5. Пока у меня есть только один видимый контейнер в форме и я заполняю все обязательные поля, моя форма не будет отправлена. Эти скрытые поля по какой-то причине все еще необходимы. Есть ли способ исключить эти поля из проверки? Вот пример:

var checkbox = $('.account-type');
checkbox.on('change', function() {
  var checked = false;

  checkbox.each(function() {
    checked = checked || $(this).is(':checked');
  });

  checkbox.prop('required', !checked);
});

$('.frm-Submit').on('submit', submitAdminFrm);

function submitAdminFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  alert('Submit form!');
}
<script language = "javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language = "javascript" src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name = "frmSave" id = "frmSave" class = "frm-Submit" autocomplete = "off">
  <div class = "form-group required">
    <label class = "control-label" for = "fname"><span class = "label label-primary">First Name:</span></label>
    <input type = "text" class = "form-control" name = "frm_firstname" id = "frm_firstname" placeholder = "Enter First Name" maxlength = "50" required>
  </div>
  <div class = "form-group required">
    <label class = "control-label" for = "lname"><span class = "label label-primary">Last Name:</span></label>
    <input type = "text" class = "form-control" name = "frm_lastname" id = "frm_lastname" placeholder = "Enter Last Name" maxlength = "50" required>
  </div>
  <div class = "form-group required">
    <label class = "control-label" for = "type"><span class = "label label-primary">Account Type:</span></label>
    <div class = "checkbox">
      <label for = "user">
          <input type = "checkbox" name = "frm_isuser" id = "frm_isuser" class = "account-type" data-toggle = "collapse" data-target = "#user-account" required> 
          <span class = "label label-default">User</span>
      </label>
      <label for = "staff">
          <input type = "checkbox" name = "frm_isstaff" id = "frm_isstaff" class = "account-type" data-toggle = "collapse" data-target = "#staff-account" required> 
          <span class = "label label-info">Staff</span>
       </label>
    </div>
  </div>
  <div id = "user-account" class = "collapse">
    <div class = "form-group required">
      <label class = "control-label" for = "active"><span class = "label label-default">Active User:<span></label>
      <select class = "form-control" name = "frmSaveaccount_activeuser" id = "frmSaveaccount_activeuser" required>
        <option value = "">-- Select the option --</option>
        <option value = "0">No</option>
        <option value = "1">Yes</option>
      </select>
    </div>
  </div>
  <div id = "staff-account" class = "collapse">
    <div class = "form-group required">
      <label class = "control-label" for = "activestaff"><span class = "label label-info">Active Staff:<span></label>
      <select class = "form-control" name = "frmSaveaccount_activestaff" id = "frmSaveaccount_activestaff" required>
        <option value = "">-- Select the option --</option>
        <option value = "0">No</option>
        <option value = "1">Yes</option>
      </select>
    </div>
  </div>
  <div class = "row">
    <div class = "form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type = "submit" name = "frmSaveaccount_submit" id = "frmSaveaccount_submit" class = "btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Если кто-нибудь знает, как предотвратить проверку полей внутри скрытого контейнера, дайте мне знать.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
0
2 963
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку оба флажка по умолчанию отключены, добавьте disabled во входы (выбирает) внутри обоих div. Затем все, что вам нужно сделать, это внутри .change() переключить это свойство disabled в соответствии с состоянием соответствующего флажка.

HIH

var checkbox = $('.account-type');

checkbox.on('change', function() {
  var checked = false;

  checkbox.each(function() {
    checked = checked || $(this).is(':checked');
  });

  checkbox.prop('required', !checked);
  
  $('div'+$(this).data('target') + ' :input').prop('disabled', !$(this).is(':checked'));
});

$('.frm-Submit').on('submit', submitAdminFrm);

function submitAdminFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  alert('Submit form!');
}
<script language = "javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language = "javascript" src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name = "frmSave" id = "frmSave" class = "frm-Submit" autocomplete = "off">
  <div class = "form-group required">
    <label class = "control-label" for = "fname"><span class = "label label-primary">First Name:</span></label>
    <input type = "text" class = "form-control" name = "frm_firstname" id = "frm_firstname" placeholder = "Enter First Name" maxlength = "50" required>
  </div>
  <div class = "form-group required">
    <label class = "control-label" for = "lname"><span class = "label label-primary">Last Name:</span></label>
    <input type = "text" class = "form-control" name = "frm_lastname" id = "frm_lastname" placeholder = "Enter Last Name" maxlength = "50" required>
  </div>
  <div class = "form-group required">
    <label class = "control-label" for = "type"><span class = "label label-primary">Account Type:</span></label>
    <div class = "checkbox">
      <label for = "user">
          <input type = "checkbox" name = "frm_isuser" id = "frm_isuser" class = "account-type" data-toggle = "collapse" data-target = "#user-account" required> 
          <span class = "label label-default">User</span>
      </label>
      <label for = "staff">
          <input type = "checkbox" name = "frm_isstaff" id = "frm_isstaff" class = "account-type" data-toggle = "collapse" data-target = "#staff-account" required> 
          <span class = "label label-info">Staff</span>
       </label>
    </div>
  </div>
  <div id = "user-account" class = "collapse">
    <div class = "form-group required">
      <label class = "control-label" for = "active"><span class = "label label-default">Active User:<span></label>
      <select disabled class = "form-control" name = "frmSaveaccount_activeuser" id = "frmSaveaccount_activeuser" required>
        <option value = "">-- Select the option --</option>
        <option value = "0">No</option>
        <option value = "1">Yes</option>
      </select>
    </div>
  </div>
  <div id = "staff-account" class = "collapse">
    <div class = "form-group required">
      <label class = "control-label" for = "activestaff"><span class = "label label-info">Active Staff:<span></label>
      <select disabled class = "form-control" name = "frmSaveaccount_activestaff" id = "frmSaveaccount_activestaff" required>
        <option value = "">-- Select the option --</option>
        <option value = "0">No</option>
        <option value = "1">Yes</option>
      </select>
    </div>
  </div>
  <div class = "row">
    <div class = "form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type = "submit" name = "frmSaveaccount_submit" id = "frmSaveaccount_submit" class = "btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Другие вопросы по теме