Quiero que el botón Enviar llame a la función solo si los campos de entrada cumplen con los requisitos establecidos. ¿Hay una manera más fácil de hacerlo que hacer una declaración if para cada elemento de entrada?
<div class="container"> <form> <input id="inputname" type="text" name="name" required placeholder="Your Name"> <input id="email" placeholder="Your E-mail" type="email" name="email" required> <input id="phone" type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required> <textarea type="text" rows="4" placeholder="Add comments(optional)" id="comments"></textarea> <button type="submit" onclick="submitted()"> Reserve a Table</button> </form> </div> <script> const container = document.querySelector('.container'); function submitted() { container.innerHTML = `<i class="fa-regular fa-circle-check"></i><br> Thank you, the form has been submitted!` } </script>Sí. Consulte este tutorial para obtener más detalles sobre la validación de formularios.
En particular, bajo el encabezado Uso de la validación de formulario integrada :
Cuando un elemento no es válido, lo siguiente es cierto:
...
Si el usuario intenta enviar los datos, el navegador bloqueará el formulario y mostrará un mensaje de error.
Consulte también la nota sobre el proceso de validación de restricciones para obtener más información sobre cuándo sucede esto.
La muestra publicada originalmente se muestra en este violín , pero le faltaba un punto al comienzo del selector de container .
Como solución aquí, puede mover la llamada de función al controlador de envío del formulario, en lugar del controlador de clic del botón de envío. Ese violín está aquí e incluye solo las siguientes etiquetas modificadas: <form onsubmit="submitted()"> y <button type="submit"> .