带有patterMismatch的表单验证函数不显示错误

Question

我想知道是否有人可以指出为什么validity.patternMismatch的功能不显示适当的错误消息，而validity.valueMissing的相同功能显示它。

谢谢。

小提琴

const inputs = document.querySelectorAll("input");
inputs.forEach(function(input) {
const e_space = input.closest("div div").querySelector(".error");
input.addEventListener("focus", function() {
if (input.classList.contains("input-red")) {
input.classList.remove("input-red")
}
})
input.addEventListener("blur", function() {
//pattern mismatch -still need to seperate them to text/number/email
if (input.validity.patternMismatch) {
if (e_space) {
e_space.textContent = "This field can only contain letters from a-z.";
input.classList.add("b-r");
}
input.classList.add("input-red");
} else {
e_space.textContent = "";
input.classList.remove("b-r");
}

//if empty
input.value = input.value.trim();
if (input.validity.valueMissing) {
if (e_space) {
e_space.textContent = "This field must not be empty.";
input.classList.add("b-r");
}
input.classList.add("input-red");
} else {
e_space.textContent = "";
input.classList.remove("b-r");
}
})
})

<label for="surname">Surname:<span class="asterx">*</span></label>
<div>
<input type="text" id="surname" name="surname" required placeholder="Please enter your Surname" pattern="[A-Za-z]{2,15}" />
<div class="error" id="e_surname"></div>
</div>
<label for="tel">Phone number:<span class="asterx">*</span></label>
<div>
<input type="tel" id="tel" name="tel" required placeholder="Please enter your Phone number" pattern="[0-9]{9}" />
<div class="error" id="e_tel"></div>
</div>

Answer 1

你在控制台有一个错误，它说:

TypeError: can't access property "querySelector", input.closest(...) is null",

从

中删除一个div

closest("div div")

但是你的主要问题是你的else在两个validity检查，你每次删除第一个消息与第二个:

e_space.textContent = "";

删除else语句，创建一个新的if语句:

if (input.validity.valueMissing === false && input.validity.patternMismatch === false) {
e_space.textContent = "";
input.classList.remove("b-r");
}

const inputs = document.querySelectorAll("input");
inputs.forEach(function(input) {
const e_space = input.closest("div").querySelector(".error");
input.addEventListener("focus", function() {
if (input.classList.contains("input-red")) {
input.classList.remove("input-red")
}
})
input.addEventListener("blur", function() {
//pattern mismatch -still need to seperate them to text/number/email
if (input.validity.patternMismatch) {
if (e_space) {
e_space.textContent = "This field can only contain letters from a-z.";
input.classList.add("b-r");
}
input.classList.add("input-red");
}

//if empty
input.value = input.value.trim();
if (input.validity.valueMissing) {
if (e_space) {
e_space.textContent = "This field must not be empty.";
input.classList.add("b-r");
}
input.classList.add("input-red");
}
if (input.validity.valueMissing === false && input.validity.patternMismatch === false) {
e_space.textContent = "";
input.classList.remove("b-r");
}
})
})

<label for="surname">Surname:<span class="asterx">*</span></label>
<div>
<input type="text" id="surname" name="surname" required placeholder="Please enter your Surname" pattern="[A-Za-z]{2,15}" />
<div class="error" id="e_surname"></div>
</div>
<label for="tel">Phone number:<span class="asterx">*</span></label>
<div>
<input type="tel" id="tel" name="tel" required placeholder="Please enter your Phone number" pattern="[0-9]{9}" />
<div class="error" id="e_tel"></div>
</div>