0
275
Vistas¿Cómo evitar el mensaje de error de validación de formulario pero aún así validar?
He buscado en Internet para resolver esto, pero no puedo encontrar ninguna respuesta. Si no estoy claro, esto es lo que quiero eliminar:
Código de ejemplo:
<form action="search.html" id="form"> <input type="text" placeholder="Search..." name="s" id="s" required> <button type="submit">Submit</button> </form> Además, para <input type=""> , ¿es mejor poner type="search" en lugar de type="text" para lo que estoy haciendo?
Si se necesita usar algo que no sea HTML, no jquery si es posible, por favor.
2 Respuestas
Responde la pregunta0
Puedes usar setCustomValidity :
<form action="search.html" id="form"> <input type="text" placeholder="Search..." name="s" id="s" oninvalid="this.setCustomValidity(' ')" required> <button type="submit">Submit</button> </form> No estoy seguro de por qué tiene que especificar un espacio ( " " ) como mensaje de validez, pero aparentemente se ignora si aplica una cadena vacía.
0
Si desea que actúe como Google, puede escuchar el evento de submit en el formulario y luego usar .preventDefault() para evitar que el formulario se envíe si el valor de entrada está vacío. Consulte https://stackoverflow.com/a/8664535/1499877 para ver otro ejemplo.
form = document.querySelector('form'); input = document.querySelector('input'); form.addEventListener('submit', function(event) { if (input.value == '') { event.preventDefault(); // prevent the form from submitting } }); <form> <input type="search" /> <button> Submit? </button> </form>Otra opción con una experiencia de usuario ligeramente mejor es deshabilitar el botón de forma predeterminada y luego habilitarlo cuando el campo de entrada de texto tenga algún valor. Esto al menos proporciona al usuario una pequeña retroalimentación (el botón se habilita) cuando ingresa algo en el campo de entrada.
input = document.querySelector('input'); button = document.querySelector('button'); input.addEventListener('input', function(event) { if (input.value == '') { button.disabled = true; } else { button.disabled = false; } }); <form> <input type="search" /> <button disabled> Submit? </button> </form>