我有一个for循环,它的设置类似于筛选类上的无效输入和提交时的[必需]。它适用于加载的图元。
我的问题是,这个循环没有迭代修改后的DOM元素(窗口加载后新的必填字段(
例如,选中一个框以启用/禁用具有attr[必需]的同一表单上的新字段。
我有一个问题for循环无法拾取新的必需选择字段(请参阅下面的代码示例2(,并且无论新的必需字段如何都通过了验证。为什么会这样?我该如何补救?
代码示例1
js_form.onsubmit = submit;
function submit(event) {
let not_pass,
js_form = document.getElementsByClassName("validate-form")[0],
text_inputs = js_form.querySelectorAll(".validate-input[required]");
for (let t of text_inputs) {
if (!t.value || t.validity.patternMismatch || t.validity.valueMissing || t.validity.typeMismatch || t.validity.checkValidity) {
// show message to user of invalid input value and set not_pass = true
}
if (t.value && !t.validity.patternMismatch) {
// remove message to user and validate false
}
}
if (not_pass) {
event.preventDefault();
console.log('All other inputs on page:' + not_pass);
return false;
}
if (!not_pass) {
js_form.setAttribute('form-is-valid', 'true');
return true;
}
};
代码示例2
以下是检查[checked]并用匹配的类修改所述字段,并按原样工作,但以上循环无法迭代这些新的必需字段
let oasis = document.getElementById('oasis');
oasis.onclick = () => clicker1();
const clicker1 = () => {
let oasisContainer = document.querySelector('.oasis-gwac');
if (document.getElementById('oasis').checked === true) {
let disabled = oasisContainer.querySelectorAll("[disabled]");
oasisContainer.querySelectorAll(".disabled").forEach((element) => {
element.disabled = false;
element.setAttribute('required',true);
element.classList.add("validate-input")
})
}
if (document.getElementById('oasis').checked !== true) {
{
oasisContainer.querySelectorAll(".disabled").forEach((element) => {
element.disabled = true;
element.removeAttribute('required');
element.classList.remove("validate-input")
})
}
};
};
这个错误是通过修改函数的调用方式解决的。我的入口文件app.js调用了一个导出的函数submit((,并没有在每次提交时重新循环,所以我现在在函数submit之后立即调用submit事件,现在它重新循环所述新元素。