如果未输入任何输入，如何调用表单有效性事件

Question

我有一个带有引导程序的简单表单，在提交之前需要对其进行验证。它自动支持无效反馈。看起来像这个

let forms = document.querySelectorAll(".needs-validation");
var productNameField = document.getElementById("productName");
productNameField.addEventListener("input", function () {
var val = document.getElementById("productName").value;
console.log("not entering here if I don't enter an input", val);
if (!isValidString(val)) {
productNameField.setCustomValidity("invalid");
} else {
productNameField.setCustomValidity("");
}
});


Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener(
"submit",
function (event) {
if (!form.checkValidity()) {
console.log("not valid");
event.preventDefault();
event.stopPropagation();
}
console.log("here validation");
form.classList.add("was-validated");
},
false
);
});

<form
action="/products/addProduct"
enctype="multipart/form-data"
class="needs-validation"
novalidate
method="post"
>
<div class="col-md-12 position-relative">
<label for="productName" class="form-label"
>Product Name</label
>
<input
type="text"
name="productName"
id="productName"
class="form-control"
/>
<div class="invalid-feedback">
Please provide a valid Product Name(at least two
characters, no special characters allowed).
</div>
</div>
<div>
<button type="submit" id="savebutton" name="Submit">
Create
</button>
</div>
</form>

现在，当我键入一个输入时，我会立即看到一个错误if！validString(因为输入事件侦听器(。但是，如果我只是点击提交按钮，它并没有调用validString函数。

我该怎么办？

Answer 1

const productNameField = document.getElementById("productName");

const isInputValid = function() {
return productNameField.value.length > 1;
}
const updateValidity = function() {
if (isInputValid()) {
productNameField.classList.remove('invalid')
} else {
productNameField.classList.add('invalid')
}
}

productNameField.addEventListener("input", updateValidity);


const forms = document.querySelectorAll(".needs-validation");

Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener(
"submit",
function (event) {
updateValidity();
if (isInputValid()) {
console.log("validation complete");
form.classList.add("was-validated");
} else {
console.log("validation failed");
event.preventDefault();
}
}
);
});