Me pregunto si hay una manera de forzar una verificación de las entradas requeridas en un formulario antes de enviarlo mediante programación usando Javascript puro:
<form method="post" action="myController.php" id="myForm"> <input type="text" id="input1" required> <input type="text" id="input2" required> <input type="text" id="input3" required> <input type="submit" onClick="return checkForm(event)" value="Save"> </form>Mi archivo Javascript:
function checkForm(e) { e.preventDefault(); // Some other stuff /*Prevalidate required inputs here*/ document.getElementById('myForm').submit(); }Me pregunto si hay algo como:
if(document.getElementById('myForm').valid()) { document.getElementById('myForm').submit() }Donde se verifican los insumos requeridos justo antes de enviar el formulario sin necesidad de verificar uno a uno directamente por código.
Existe el evento form.onSubmit
Pero si está usando HTML 5, puede usar input.pattern con una expresión regular; el envío se bloqueará si la entrada no pasa la verificación y el elemento de input (en muchos navegadores) tendrá un borde rojo alrededor.
Si necesita hacer algo personalizado al enviar, puede activar la validación a través de form.reportValidity() y obtener un valor booleano que indique si todas las entradas han satisfecho sus restricciones.
También puede escuchar eventos invalid que se activarán por cada entrada no válida durante la validación si desea hacer algo para marcarlos en la interfaz de usuario:
function onInvalid (e) { e.target.classList.add('invalid'); } const form = document.querySelector('form'); document.querySelectorAll('input').forEach(input => { input.addEventListener('invalid', onInvalid); }); form.addEventListener('submit', (e) => { e.preventDefault(); const valid = form.reportValidity(); }) .invalid { border: 4px solid red; } <form> <input name="test1" required /> <input name="test2" required /> <input name="test3" required /> <input type="submit" /> </form>Aproveche el atributo de formulario onsumbit para enviar el formulario si el valor devuelto por la función checkForm que devuelve un valor booleano si todos los campos están llenos y no vacíos dinámicamente.
function checkForm(e) { let valid = true; inputs = document.querySelectorAll('[type="text"]') for(input of inputs){ if(input.value.trim()==''){ valid = false; break; } } return valid; } <form method="post" id="myForm" action='test.php' onsubmit="return checkForm(this)"> <input type="text" id="input1" required> <input type="text" id="input2" required> <input type="text" id="input3" required> <input type="submit" value="Save"> </form>