Tengo un registro de usuarios, hay un input así:
<input type="text" name="username" required>
Pero si el usuario presiona su barra espaciadora, burla el required. ¿Alguna solución?
Tengo un registro de usuarios, hay un input así:
<input type="text" name="username" required>
Pero si el usuario presiona su barra espaciadora, burla el required. ¿Alguna solución?
Para eso ocupa la función de javascript trim
que básicamente lo que hace es limpiar de espacios un string por la izquierda y derecha, esto permite limpiar de espacios cadenas de texto.
También, usaremos length para contar los caracteres de la cadena recogida y en caso de que esté vacía, devolveremos false
para no permitirle al usuario enviar el formulario:
Ejemplo:
JavaScript
function verificar() {
if ( document.getElementById("nombre-input").val().trim().length > 0 ) {
return true;
}
else {
return false;
}
}
HTML
<form>
<label>Nombre:</label>
<input id="nombre-input" type="text">
<input type="button" onclick="verificar()" value="Enviar">
</form>
Podes utilizar el atributo pattern
<form>
<input type="text" name="username" pattern="[a-zA-Z0-9]{8,}" required />
<button>Guardar</button>
</form>