2

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 ids 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.

1
  • Una solución sería comprobar qué elemento generó el evento y sólo comprobar ese. ¿Lo has probado? Commented el 16 mar. 2020 a las 22:50

2 respuestas 2

2

Puedes hacer el trabajo comprobando y modificando únicamente el elemento que genera el evento:

/* Expresión regular de ejemplo (letras, números, _ y espacios) */
let valit2 = /^[\w ]*$/i;
/* Busco los elementos <input> y <textarea> del fomulario */
document.querySelectorAll('form input, form textarea').forEach((elemento) => {
  /* Sólo queremos cambiar el color del borde, así que usamos borderColor */
  elemento.addEventListener(
    /* En "keyup" pondremos fondo verde si se cumple el test y rojo si no*/
    "keyup", () => elemento.style.borderColor =
      valit2.test(elemento.value) ? 'green' : 'red'
  );
});
<form>
  <div>
    <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><br/>
    <textarea name="mensaje" id="mensaje" cols="30" rows="10" ></textarea>
  </div>
</form>

Además, estabas anidando eventos cada vez que levantabas una tecla en un control ya que document.addEventListener("keyup", validN); llama a validN en cada levantamiento de tecla y dentro de esa llamada agregas a la cadena un nuevo evento repetido en id[i].addEventListener('keyup', function() {, por lo que pasado un tiempo y tecleado una buena cantidad de letras el navegador empezaría a usar la CPU en exceso.

2

Tienes un montón de código innecesario. La idea es muy simple:

  1. Con querySelectorAll alcanzas todos los elementos que te interesen. El selector que tenías no estaba bien, lo he corregido para que alcance todos los input que tienen la clase col-input y el elemento que tiene el id col-text
  2. Luego asignas a todos ellos el listener, verificas lo que tengas que verificar y cambias lo que tengas que cambiar usando this. Así no afectará, al momento de editar un elemento en particular, a todos los demás.

Entendiendo eso, todos los if y todas las referencias dentro o fuera del listener no tienen ningún sentido.

Nota

Dado que el código era algo confuso, no sé si te interesa incluir a subject en esa lógica. Si es así, modifica la forma de alcanzar los elementos en mSelector para incluirlo. La forma de selección que usas ahí quizá no sea la más adecuada, eso se puede cambiar con facilidad, dependiendo de lo que quieras.

Mira cómo queda el código ahora. Dentro del listener hay solamente ¡4 líneas de código! se ve largo por todos los comentarios que puse explicándote cada cosa.

Espero te sirva.

/*Validador*/
var valit2 = /^[,\\.\\a-zA-Z0-9ñÑáéíóúÁÉÍÓÚ ]*$/;
/*Selector*/
var mSelector = document.querySelectorAll(".col-input > input , #col-text");

/*Asignamos el listener a los elements encontrados en selector*/
for (var i = 0; i < mSelector.length; i++) {
  mSelector[i].addEventListener('keyup', function() {
    /*
      Dado que hay un input anidado en un div hay que hacer esto
      Si quieres puedes simplificar asignando el listener
      al input directamente
    */
    var thisVal = this.nodeName === "DIV" ? this.children[1].value : this.value;
    /*
       Usamos un ternario para determinar qué estilo aplicar
    */
    var css = valit2.test(thisVal) ? "1px solid #00ff00" : "1px solid #ff0000";
    /*
      Aplicamos el estilo al elemento actual
    */
    this.style.border = css;
  });
}
<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 id="col-text">
    <label for="mensaje">Tell me about it</label>
    <textarea name="mensaje" id="mensaje" cols="30" rows="10"></textarea>
  </div>

2
  • Hola buenos dias Cedano, te agradezco tu tiempo. Tu codigo funciona bien y comparándolo con el mio, me doy cuenta que que no era necesario tanto if como tu dices. Pasa que estaba interpretando la cosas desde otra vista. Commented el 17 mar. 2020 a las 13:51
  • @Josesequera me alegro de que te haya servido.
    – A. Cedano
    Commented el 17 mar. 2020 a las 14:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.