He añadido 3 <input>
con el mismo gestor de eventos. Esto con la intención de que el usuario se dé cuenta si está escribiendo mal el campo o si ha añadido texto correcto a éste (lo hago mediante un border-color
).
En este caso, he utilizado el evento keyup
para detectar lo que está tecleando el usuario, luego le paso mi función validN
que contiene un querySelector
que va a seleccionar al 1
y al 3
<input>
(esto es por que tengo otro campo del tipo email
, el cual hará otra tipo de validación). Luego seleccionar de igual manera al <textarea>
con su id
(#col-text
).
Con el ciclo for
añado al querySelector
y le paso mi evento keyup
, para seguidamente ir estableciendo y obteniendo los datos de los id
s de cada campo.
Los variables con ID
los manejo para ir cambiando el estado del <input>
y con sus variables normales voy analizando los campos mediante (test
).
Si se escribieron cosas como acentos y demás cosas raras, éste se coloca en rojo, de lo contrario en el borde cambia a verde.
document.addEventListener("keyup", validN);
function validN() {
var id = document.querySelectorAll(".col-input:nth-child(2n+1) > input , #col-text");
for (var i = 0; i < id.length; i++) {
id[i].addEventListener('keyup', function() {
var nombre = document.getElementById("nombre").value;
var nombreID = document.getElementById("nombre");
var subject = document.getElementById("asunto").value;
var subjectID = document.getElementById("asunto");
var sms = document.getElementById("mensaje").value;
var smsID = document.getElementById("mensaje");
var valit2 = /^[,\\.\\a-zA-Z0-9ñÑáéíóúÁÉÍÓÚ ]*$/;
if (valit2.test(nombre)) {
nombreID.style.border = "1px solid #00ff00";
}
else {
nombreID.style.border = "1px solid #ff0000";
}
if (valit2.test(subject)) {
subjectID.style.border = "1px solid #00ff00";
}
else
{
subjectID.style.border = "1px solid #ff0000";
}
if (valit2.test(sms))
{
smsID.style.border = "1px solid #00ff00";
}
else {
smsID.style.border = "1px solid #ff0000";
}
});
}
}
<form>
<div class="col-input">
<label for="nombre">Name</label>
<input type="text" name="nombre" id="nombre">
</div>
<div class="col-input">
<label for="Telefono">Subject</label>
<input type="text" name="asunto" id="asunto">
</div>
</div>
<div id="col-text">
<label for="mensaje">Tell me about it</label>
<textarea name="mensaje" id="mensaje" cols="30" rows="10" ></textarea>
</div>
Ahora mi pregunta es:
¿Cómo puedo evitar que al teclear en los <inputs>
todos ellos se pongan de color verde?.
Si pueden ver, al teclear todos ellos cambian su estado a verde. ¿Cómo podría hacer esto por separado? Me refiero a ir escribiendo en cada uno, sin afectar a los demás campos.
Igualmente acepto sugerencias al código, estoy probando esto ya que si quisiera podría poner un keyup
a cada ID
pero sería demasiado código a mi parecer.
¿Alguna sugerencia? Gracias.