Tengo un formulario de "Actualizar perfil" con muchas entradas. El usuario aún puede actualizar su perfil incluso si no tiene todas las entradas llenas. Por ejemplo, si el usuario solo quiere completar el campo de dirección por ahora y decide omitir todos los demás campos de entrada, puede hacerlo. El formulario aún se enviará.
Sin embargo, después de la prueba, cuando se hace clic en el botón "Guardar", el formulario aún se envía y muestra un mensaje de éxito incluso cuando NINGUNO de los campos está lleno. Quiero hacer una función que verifique primero si al menos uno de los cuadros de texto está lleno. Si todos los cuadros de texto están vacíos, quiero que aparezca una alerta y también detener el envío del formulario.
Intenté buscar en diferentes páginas, pero todas están mezcladas con preguntas de hace más de 6 años y tengo problemas para obtener la sintaxis correcta. ¿Alguien puede proporcionarme una sintaxis de javascript para este tipo de cosas para que pueda comenzar desde allí? ¡Gracias!
Utiliceelementos de entrada/formulario HTML5 nativos. El navegador probará automáticamente si su entrada cumple con el tipo.
En este ejemplo, tenemos una variedad de campos (texto, correo electrónico, casilla de verificación), todos los cuales son obligatorios. El formulario no se puede enviar hasta que todos los campos estén completos. Cuando se hace clic en el botón Enviar, usamos un oyente onsubmit adjunto al formulario que llama a un controlador que usa preventDefault para detener el envío del formulario y luego registra un mensaje.
const form = document.querySelector('form'); form.addEventListener('submit', handleSubmit, false); function handleSubmit(e) { e.preventDefault(); console.log('Validated'); } input { display: block; border: 1px solid black; } input:invalid { border: 1px solid red; } <form> Name: <input name="name" type="text" pattern="[A-Za-z]+" required placeholder="Letters only" /> Email: <input name="email" type="email" required placeholder="Valid email"/> Over 18: <input name="check" type="checkbox" required /> <button type="submit">Submit</button> </form>