javascript - 提交前应至少选择两个输入
问题描述
如果未选中任何复选框,则表单不允许发送。
我想为盒子创建一个这样的规则。至少必须填写两个方框。否则,表格不应被允许发送。
下面是代码结构。
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
$('#submit-btn').click(() => {
const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
const checkedInputs = Array.from(x).filter(input => input.valueOf()).length
if (checkedInputs < 2) {
alert('at least 2 inpouts must be filled')
return;
}
const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
const checkedBoxes = Array.from(xd).filter(input => input.checked).length
if (checkedBoxes < 1) {
alert('at least one checkbox must be checked')
return;
}
alert(`you checked ${checkedBoxes} checkboxes`)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
<div class="camera-field">
<button type="button" class="add-camera btn btn-primary">+ Add Camera
</button>
</div>
<div class="control-group input-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
<div class="input-group-btn">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
<div class="mt-2">
</div>
</div>
解决方案
你需要改变你的条件
input.valueOf()
应该input.value
checkbox < 1
至checkbox < 2
$(document).ready(function() {
var max_fields = 32; //maximum input boxes allowed
var wrapper = $(".cameras"); //Fields wrapper
var add_button = $(".add-camera"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="control-group input-group"><div class="input-group mb-3"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" name="corrects[]" value="' + x + '" aria-label="Checkbox for following text input"></div></div><input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox"><div class="input-group-btn"><button class="btn btn-danger remove-camera" type="button"> Remove</button></div></div></div>'); //add input box
}
});
$(wrapper).on("click", ".remove-camera", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
})
$('#submit-btn').click(() => {
const x = document.querySelector('.cameras').querySelectorAll('input[type="text"]')
const checkedInputs = Array.from(x).filter(input => input.value).length
if (checkedInputs < 2) {
alert('at least 2 inpouts must be filled')
return;
}
const xd = document.querySelector('.cameras').querySelectorAll('input[type="checkbox"]')
const checkedBoxes = Array.from(xd).filter(input => input.checked).length
if (checkedBoxes < 2) {
alert('at least two checkbox must be checked')
return;
}
alert(`you checked ${checkedBoxes} checkboxes`)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cameras">
<div class="camera-field">
<button type="button" class="add-camera btn btn-primary">+ Add Camera
</button>
</div>
<div class="control-group input-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="corrects[]" value="1" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" name="options[]" aria-label="Text input with checkbox">
<div class="input-group-btn">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<button type="submit" class="btn btn-primary" id="submit-btn">submit</button>
<div class="mt-2">
</div>
</div>
推荐阅读
- r - 为什么 r 显示 double 而不是 Vector?
- javascript - 我需要在每个输入字段中弹出小键盘.. 使用 javascript
- swift - MVC 中的视图应该包含什么?
- r - 使用聚合创建条形图
- java - 我不知道我在 appcompat:design:1.1.0 的错误在哪里
- html - 侧导航栏滑出到对角线 div
- python-3.x - 如何从excel导入日期并使用它?
- r - 有没有办法将更大列表中的数据框列表汇总在一起?
- android - 在 Android react-native-navigation v2 中活动时防止底部标签按钮和文本动画
- python - 如何根据在 Django 中更改字段的用户自动更新字段?