Tengo un formulario simple con bootstrap que necesito validar antes de enviarlo. Tiene soporte automático para comentarios no válidos. Se parece a esto
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>Ahora, cuando escribo una entrada, inmediatamente veo un error si es !validString (debido al detector de eventos de entrada). Pero si solo hago clic en el botón Enviar, no está llamando a la función validString.
Qué tengo que hacer ?
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(); } } ); });