Hola, tengo un problema y es que no doy para más jeje
Quiero validar una caja de texto de manera en que sólo escribiendo ciertas palabras te de el cuestionario como válido. Por ejemplo:
<!-- código HTML --> <html> <script type="text/javascript"> function validant(co) { var coTipus = document.getElementById("op").value; if( coTipus == "cn_vr" ) { alert('mensaje 1'); return false; } var nom = document.getElementById("nom").value; if( nom == null || nom.length == <=3 || /^\s+$/.test(nom) ) { alert('mensaje 2'); return false; } return true; } </script> <form id="co" name="co" action="cnt.php" method="post" onsubmit="return validant(co)"> <label for="op">Opción 1 <select id="op" name="op"> <option value="cn_vr" selected="selected">opcion 0</option> <option value="opo">opcion 1</option> </select> </label> <br> <label for="nom">Campo 1<input type="text" name="nom" id="nom"></label> <br> <input name="Submit" type="submit" value="enviar"> </form> </html>
Este sería un ejemplo de un mini cuestionario. Mi intención es que en el campo con id nom aparte de la norma que tiene de espacios, formulario vacío y tal if( nom == null || nom.length == <=3 || /^\s+$/.test(nom) ) , tenga una norma que solo devuelva true si el usuario escribe una palabra de las palabras que yo designe (como por ejemplo tierra, agua o cielo)
Si el usuario escribe alguna de estas palabras, se devuelve true, si escribe cualquier otra palabra, se develve false.
¿Es posible hacer esto? Llevo 5 días rompiéndome la cabeza y aún no he conseguido nada jeje
Gracias de antemano
Respuestas
Hola, puedes meter esas palabras en el if, aunque supongo que eso ya lo sabes y tu lo que querrás es cargar desde la BBDD un montón de palabras. Javascript a pelo no uso mucho, uso más jQuery, donde existe jQuery.data(); Esto te permite agregar elementos a una caja y obtenerlos cuando quieras de manera oculta, puedes cargar con AJAX la info cuando cargue la página o cuando se meta en la caja de texto y luego ir comprobando con jQuery.data();
También puedes ir haciendo llamada AJAX según escribe e ir obteniendo las posibles opciones e ir mostrándoselo.
Otra opción y puede que la más rápida y sencilla es usando Select2
Échale un vistazo a ver que te parece, puedes poner con el una caja de texto que al escribir vaya filtrando los datos cargados en un <select> al crear la página, y otras muchas cosas más.
Un saludo
@AlbertoVioque
Hola, gracias por responder.
sobre usar jQuery o AJAX, me encantaría, pero la lástima es que no tengo ni idea de como va eso, me he mirado ese enlace y es como chino xD
Sobre lo de select2, no es mi intención hacer un cuadro tipo<select>, por mucho que en el código que facilité salía uno. Realmente quería centrarme en el cuadro de <input> llamado nom.
La pega es que ya tengo 3 formularios hechos con JavaScript, que me ha sido sencillo de aprender un poco y si me pusiera a ver cómo es jQuery (que lo miro y me parece bastante más complicado) debería empezar de cero y no confío en conseguirlo jejeje
Cabe destacar que realmente no tengo ni he estudiado nada de eso y que lo "medio, consigo" alimentándome de las cosas que pone la gente por internet.
Pero has dicho algo interesante, eso de que lo puedo incluir en el if realmente no quiero poner muchas palabras, en total serán unas 14-16 palabras, si pudiera ponerlas en el if me iría de coña y me ahorraría indagar por internet aprendiendo el funcionamiento de otros lenguajes (que seguro que lo haré mas adelante por curiosear y adquirir conocimiento, pero ahora me llevaría demasiado tiempo).
Esto que me dices de ponerlo en el if ya se me había ocurrido, y he probado de ponerlo de todas las maneras lógicas que he creído y ninguna me ha resultado. ¿tu sabrías como hacer el if y poner exactamente cada palabra para que resulte correctamente?
O es más, el poder hacer dos if para el mismo campo para poder poner dos mensajes distintos.
<!-- EJEMPLO --> <script type="text/javascript"> function validant(co) { var nom = document.getElementById("nom").value; if (nom == null || nom.length <=3 || /^\s+$/.test(nom) ) { alert('mensaje 2'); return false; } if (nom == las palabras aquí no se de que manera) { alert('mesnaje 3'); return false; } return true; } </script>
¿Sería posible algo así? ¿Estaría bien formulado? ¿Qué debería contener el campo if para que me valide por esos nombres?
Siento coserte a preguntas, soy muy novato, de nuevo muchísimas gracias por la ayuda.
PD: Te he dejado algo interesante sobre las fuentes
Un saludo.
@Fruithg
@Fruithg, si jQuery te parece demasiado complicado y el número de palabras es pequeño, lo mejor sería que hicieras la comprobación en el if, tal y como tú mismo propones.
Para ello, tienes que utilizar una función de JavaScript llamada indexOf(). Explicada de forma sencilla para tu caso, lo que hace esta función es lo siguiente:
- A la función le pasas una lista de palabras correctas y la palabra que ha introducido el usuario.
- La función te devuelve en qué posición de la lista se encuentra esa palabra (por ejemplo
0si la palabra está en la primera posición). - Si la palabra no está dentro de la lista, te devuelve
-1.
Así que el truco está en comprobar el valor devuelto por la función indexOf(). Si te devuelve -1, la palabra no está en la lista de palabras correctas y por tanto, se trata de un error. Aquí está un ejemplo de este posible código:
<script type="text/javascript"> function validant(co) { var nom = document.getElementById("nom").value; if (nom == null || nom.length <= 3 || /^\s+$/.test(nom)) { alert('mensaje 2'); return false; } var palabrasCorrectas = ["palabra 1", "palabra 2", ..., "palabra 20"]; if (-1 == palabrasCorrectas.indexOf(nom)) { alert('mensaje 3'); return false; } return true; } </script>
La función indexOf() funciona bien en todos los navegadores modernos. Si tus usuarios utilizan Internet Explorer 8, tendrás que copiar y pegar algo más de código, tal y como se explica en la documentación de indexOf().
@javiereguiluz
@javiereguiluz lo he probado y va de lujo, sencillo y encima con ejemplo, te has lucido, ¡¡muchísimas gracias!!
¡Un saludo!
@Fruithg