У меня есть форма с 6 входами, входы сгруппированы по два, и я включаю/выключаю их, используя флажок, как в этой скрипке.
Как ограничить поиск? Например, я должен сообщить пользователю, что им нужно заполнить оба входа, если они выберут флажок check1, или если они выбрали флажки check1 и check2, они должны заполнить все 4 входа. Прямо сейчас у меня это:
if( (check1.checked || check2.checked || check3.checked) ){
if($scope.tolPositivaDim1 == '' || $scope.tolNegativaDim1 == '' ||
$scope.tolPositivaDim2 == '' || $scope.tolNegativaDim2 == '' ||
$scope.tolPositivaDim3 == '' || $scope.tolNegativaDim3 == ''){
console.log(''Need to fill all inputs);
} else
console.log('Something');
} else {
console.log('Need to check at least one');
}
Но с этим он не позволяет мне искать, пока я не заполнил шесть входов. Есть ли способ сделать это без необходимости делать, if
для каждого конкретного случая?:
if(check1.checked) || if(check1.checked && check2.checked).....
Вы можете улучшить код для работы с любым количеством таких флажков и комбинаций двойного ввода. Затем определите обработчик для события submit
формы и убедитесь, что входы не пустые, когда они не отключены. Если один из них пуст, возвращайте false
, чтобы отменить отправку.
В некотором коде ниже используются функции ES6. Если вы не можете использовать их, нетрудно перевести идею на ES5:
var checks = [...document.querySelectorAll('[id^=checkDimension]')],
positivaDims = [...document.querySelectorAll('[id^=tolPositivaDim')],
negativaDims = [...document.querySelectorAll('[id^=tolNegativaDim')];
checks.forEach(function (check, i) {
check.onchange = function() {
positivaDims[i].disabled = !checks[i].checked;
negativaDims[i].disabled = !checks[i].checked;
}.bind(i);
// call the above code also on page load, so to initialise the disabled
// properties correctly:
check.onchange();
});
document.forms[0].onsubmit = function (e) {
if (positivaDims.concat(negativaDims).some(function (input) {
// if for any non-disabled input the value is blank...
return !input.disabled && input.value == '';
})) {
alert('All inputs are required.');
// cancel form submission (either of the two methods below will do it)
e.preventDefault();
return false;
}
}
<form class="" method="post">
<div class="form-group col-sm-12">
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" id="checkDimension1"> Dimension 1</label>
</div>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolPositivaDim1" placeholder="0.03" ng-model="tolPositivaDim1">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolNegativaDim1" placeholder="0.03" ng-model="tolNegativaDim1">
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" id="checkDimension2"> Dimension 2</label>
</div>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolPositivaDim2" placeholder="0.03" ng-model="tolPositivaDim2">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolNegativaDim2" placeholder="0.03" ng-model="tolNegativaDim2">
</div>
</div>
<div class="form-group col-sm-12">
<div class="col-sm-4">
<div class="checkbox">
<label><input type="checkbox" id="checkDimension3"> Dimension 3</label>
</div>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolPositivaDim3" placeholder="0.03" ng-model="tolPositivaDim3">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="tolNegativaDim3" placeholder="0.03" ng-model="tolNegativaDim3">
</div>
</div>
<button type="submit" class="btn btn-default pull-right" >Search</button>
<button class="btn btn-default pull-right">Cancel</button>
</form>
То же самое можно найти и в этой скрипке.