Estoy usando una declaración If para validar si los campos de entrada cumplen con ciertos criterios. En caso de que falle la validación, aparecerá una alerta y el borde de entrada se volverá rojo.
¿Cómo puedo asegurarme de que solo el campo de entrada que falló en la validación se vuelva rojo? Consideré separarlos en If y Else, sin embargo, esto obviamente hará uno u otro en caso de que ambos fallen. Esto me lleva a creer que If no es el más adecuado aquí, o que podría haber una forma de especificar dentro del primer bloque If.
! if (document.getElementById("nombre").value.length > "30" || document.getElementById("commentText").value.length > "100" ) { document.getElementById("name").style.border = "2px rojo sólido"; alert("El nombre debe tener menos de 30 caracteres"); e.preventDefault(); } más {....
Actualicé el código como se muestra a continuación, sin embargo, la primera instrucción if que verifica si ambos campos no son válidos no se ejecuta ... No estoy seguro de por qué.
Código actualizado:
if ( document.getElementById("name").value.length > 30 && document.getElementById("commentText").value.length > 100 ) { document.getElementById("name").style.border = "2px solid red"; document.getElementById("commentName").style.border = "2px solid red"; alert( "Name must have fewer than 30 characters, and comment fewer than 100 characters" ); event.preventDefault(); // document.getElementById("form").reset() } else if (document.getElementById("name").value.length > 30) { document.getElementById("name").style.border = "2px solid red"; alert("Name must have fewer than 30 characters"); event.preventDefault(); } else if (document.getElementById("commentText").value.length > 100) { document.getElementById("commentText").style.border = "2px solid red"; alert("Comment must have fewer than 100 characters"); event.preventDefault(); } else {....¿Por qué no dos bloques if separados? Por ejemplo:
let isValid = true; let errors = ""; if (document.getElementById("name").value.length > 30) { isValid = false; document.getElementById("name").style.border = "2px solid red"; errors += "Name must have fewer than 30 characters. "; } if (document.getElementById("commentText").value.length > 100) { isValid = false; document.getElementById("commentText").style.border = "2px solid red"; errors += "Comment must have fewer than 100 characters. "; } if (!isValid) { e.preventDefault(); alert(errors); } else { //... }Básicamente, verifique cada campo y acumule los errores de validación, luego responda a la validación fallida general al final de esos controles.
el tipo de datos devuelto por .length es un number , no una string . Cambia también el signo de comparación.
if ( document.getElementById("name").value.length < 30 || document.getElementById("commentText").value.length < 100 ) { document.getElementById("name").style.border = "2px solid red"; alert("Name must have fewer than 30 characters"); e.preventDefault(); } else{ //your stuff goes here }Tendría otro campo if para commentText id
if ( document.getElementById("name").value.length > 30 ) { document.getElementById("name").style.border = "2px solid red"; alert("Name must have fewer than 30 characters"); e.preventDefault(); } if ( document.getElementById("commentText").value.length > 100 ) { document.getElementById("commentText").style.border = "2px solid red"; alert("Comment must have fewer than 100 characters"); e.preventDefault(); }else {....