我有一組復選框，并且在提交時需要至少選中其中一個復選框的驗證。 但我希望能夠在用戶從一組復選框中模糊出來時設定一個驗證錯誤。 問題是，如果我對最后一個復選框做模糊處理，那就不起作用了，因為他們可能會轉移到倒數第二個復選框上。 我試著在fieldset標簽中設定onblur，但這根本沒有觸發模糊。 這是否只是一個限制，不能用普通的html和vanilla JS來克服？
uj5u.com熱心網友回復：
你可以看看下一個被關注的元素是什么，并確定它們是否在同一個分組下。
。document. querySelectorAll('input[type="checkbox"]') 。 forEach((elem) => {
elem.addEventListener("blur"/span>, function (event) {
const nextElem = event.relatedTarget;
const fieldSet = elem.closest('fieldet')。
const isValid = fieldSet.querySelector("input:checked") !== null;
if (nextElem?.closest('fieldet')!==fieldSet) {
fieldSet.classList.toggle("error", !isValid) 。
} else if（isValid） {
fieldSet.classList.remove("error"/span>)。
}
});
});.error {
color: red;
}<form>/span>
<fieldset>/span>
<legend>/span>Pizza One</legend>/span>
< input type="checkbox"/span> name="x1-1" id="x1-1">
<label for="x1-1"/span>> 奶酪</label>。
< input type="checkbox" name="x1-2" id="x1-2">
<label for="x1-2"/span>> 辣椒</label>
< input type="checkbox" name="x1-3" id="x1-3">
<label for="x1=3"/span>> 蘑菇</label>。
</fieldset>/span>
<fieldset>/span>
<legend>Pizza Two</legend>
< input type="checkbox"/span> name="x2-1" id="x2-1">
<label for="x2-1"/span>> 奶酪</label>。
< input type="checkbox" name="x2-2" id="x2-2">
<label for="x2-2"/span>> 辣椒</label>
< input type="checkbox" name="x2-3" id="x2-3">
<label for="x2-3"/span>> 蘑菇</label>。
</fieldset>/span>
<input type="submit"/span> />
</form>/span>加入一個使用HTML5驗證的技巧
document. querySelectorAll('input[type="checkbox"]') 。 forEach((elem) => {
elem.addEventListener("blur"/span>, function(event) {
const nextElem = event.relatedTarget;
const fieldSet = elem.closest('fieldet')。
const isValid = fieldSet.querySelector("input:checked") !== null;
if (nextElem?.closest('fieldet')!==fieldSet) {
fieldSet.classList.toggle("error", !isValid) 。
}
});
elem.addEventListener("change"/span>, function(event) {
const fieldSet = elem.closest('fieldet')。
const isValid = fieldSet.querySelector("input:checked") !== null;
if (isValid) {
fieldSet.classList.remove("error"/span>)。
fieldSet.querySelectorAll("input") 。 forEach((cb) => {
cb.removeAttribute("required"/span>)。
});
} else {
fieldSet.querySelectorAll("input") 。 forEach((cb) => {
cb.setAttribute("required", "required") 。
});
}
});
const changeEvt = document.createEvent("HTMLEvents"/span>)。
changeEvt.initEvent("change", false, true)。
elem.dispatchEvent（changeEvt）。
});.error {
color: red;
}<form>
<fieldset>/span>
<legend>/span>Pizza One</legend>/span>
< input type="checkbox"/span> name="x1-1" id="x1-1">
<label for="x1-1"/span>> 奶酪</label>。
< input type="checkbox" name="x1-2" id="x1-2">
<label for="x1-2"/span>> 辣椒</label>
< input type="checkbox" name="x1-3" id="x1-3">
<label for="x1=3"/span>> 蘑菇</label>。
</fieldset>/span>
<fieldset>/span>
<legend>Pizza Two</legend>
< input type="checkbox"/span> name="x2-1" id="x2-1">
<label for="x2-1"/span>> 奶酪</label>。
< input type="checkbox" name="x2-2" id="x2-2">
<label for="x2-2"/span>> 辣椒</label>
< input type="checkbox" name="x2-3" id="x2-3">
<label for="x2-3"/span>> 蘑菇</label>。
</fieldset>/span>
<input type="submit"/span> />
</form>/span>uj5u.com熱心網友回復：
基于epascarello的建議，我能夠創建一個提供類似功能的函式。我有一個錯誤跨度，在復選框的下面。 我想要的行為是，如果有任何復選框被選中，就立即將其移除，但只有在用戶模糊了整個復選框的情況下才會添加錯誤跨度。請注意，這個頁面上只有一個欄位集，而且錯誤跨度有一個特定的id，我可以參考。 下面是我得到的作業函式：
document.querySelectorAll('input[type="checkbox"] ' /span>)。 forEach((elem) => {
elem.addEventListener("blur"/span>, function (event) {
var errorSpan = document.getElementById("checkboxesErrorSpan") 。
var isValid = document.querySelector("fieldet") 。 querySelectorAll("input:checked").length > 0;
if (isValid) {
if ((errorSpan.style.display == "inline") {
errorSpan.style.display = "none";
}
}
else {
if (event.relatedTarget.type !="checkbox") {
if ((errorSpan.style.display == "none"/span>) {
errorSpan.style.display = "inline"/span>;
}
}
}
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/311817.html
標籤：