У меня есть две группы полей формы, и в каждой группе есть поля с обязательным атрибутом. Однако в зависимости от того, какой пользователь выбирает, одна группа может быть скрыта, и эти поля не должны включаться в проверку формы 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>Если кто-нибудь знает, как предотвратить проверку полей внутри скрытого контейнера, дайте мне знать.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Поскольку оба флажка по умолчанию отключены, добавьте 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>