我有一些表单字段是从数据库动态生成的。有输入、复选框、单选按钮、文本区域和选择。所有字段都位于 ID 为 dynamic-form-fields
的父 div 中。某些字段具有 required
属性。
这是一个多步骤表单,因此在继续下一步之前需要验证每个“步骤/页面”。所以它没有提交表单。
如何检查 div dynamic-form-fields
中的所有必填字段是否已填写?
这是我的 HTML 代码的样子:
<input type="text" name="dff[]" placeholder="Name" required>
<input type="text" name="dff[]" placeholder="Date of Birth">
<input type="text" name="dff[]" placeholder="Email" required>
<input type="radio" name="gender" value="Male" required>
<input type="radio" name="gender" value="Female" required>
<select name="pet">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
</select>
<button id="check">Check</button>
<script>
document.getElementById("check").onclick = function () {
if() {
alert('error please fill all fields!');
}
};
</script>
如您所见,有些字段是必需的,有些则不是。每次都不一样,所以解决方案必须是动态的。还有不同类型的输入,例如选择、单选、复选框、文本等……如何确保 div ID dynamic-form-fields 中的每个“required”字段
填满了吗?
我尝试过的:
也许是这样,但我如何在 div ID dynamic-form-fields
下获取每种类型的输入(文本、单选框、复选框、选择等...)?
$('#dynamic-form-fields input:required').each(function() {
if ($(this).val() === '')
alert('error please fill all fields!');
});
最佳答案
document.getElementById("check").onclick = function() {
let allAreFilled = true;
document.getElementById("myForm").querySelectorAll("[required]").forEach(function(i) {
if (!allAreFilled) return;
if (i.type === "radio") {
let radioValueCheck = false;
document.getElementById("myForm").querySelectorAll(`[name=${i.name}]`).forEach(function(r) {
if (r.checked) radioValueCheck = true;
})
allAreFilled = radioValueCheck;
return;
}
if (!i.value) { allAreFilled = false; return; }
})
if (!allAreFilled) {
alert('Fill all the fields');
}
};
<div id="myForm">
<input type="text" name="dff[]" placeholder="Name" required>
<input type="text" name="dff[]" placeholder="Date of Birth">
<input type="text" name="dff[]" placeholder="Email" required>
<input type="radio" name="gender" value="Male" required>
<input type="radio" name="gender" value="Female" required>
<select name="pet" required>
<option value="">Select a pet</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
</select>
</div>
<button id="check">Check</button>
关于javascript - 检查是否所有必填字段都填写在特定的 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57087145/