#javascript #html #forms #bootstrap-4 #bootstrap-modal
Вопрос:
У меня есть простая форма с начальной загрузкой, которую мне нужно проверить перед отправкой. Он имеет автоматическую поддержку недопустимой обратной связи. Это выглядит так
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 ); }); lt;form action="/products/addProduct" enctype="multipart/form-data" class="needs-validation" novalidate method="post" gt; lt;div class="col-md-12 position-relative"gt; lt;label for="productName" class="form-label" gt;Product Namelt;/label gt; lt;input type="text" name="productName" id="productName" class="form-control" /gt; lt;div class="invalid-feedback"gt; Please provide a valid Product Name(at least two characters, no special characters allowed). lt;/divgt; lt;/divgt; lt;divgt; lt;button type="submit" id="savebutton" name="Submit"gt; Create lt;/buttongt; lt;/divgt; lt;/formgt; Теперь, когда я вводлю ввод, я сразу же вижу ошибку if !validString (из-за списка событий ввода). Но если я просто нажму на кнопку отправить, это не вызовет функцию validString.
Что мне делать ?
Ответ №1:
const productNameField = document.getElementById("productName"); const isInputValid = function() { return productNameField.value.length gt; 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(); } } ); });