Verificar Valor introducido con Datalist

HackID1 · #1 (**permalink**) 29/04/2015, 11:38

Buenas Foreros.

Tengo una duda básica de funcionamiento.

No suelo usar demasiado los datalist pero para este caso es Olbligatorio así que lo he usado, y bien ahora tengo un problema con la validación de un texto introducido por el usuario.

El texto o país, debe coincidir con algún País Europeo del datalist que tengo actualmente, debo realizar una comprobación por JScript, pero no doy con ello con cómo comparar el valor con el valor del Datalist y que sean Europeos.

Dejo mi Código del Datalist del formulario.

Código HTML:

Ver original<form method="post" action="datos.js" name="form1">
                        
            <table width="100%" align="center">
                <tr>
                    <td> <label>Pa&iacute;s:</label>  </td>
                    <td> <input name="pais" list="paises"/>
                        <datalist id="paises">
                            <option value="Alemania">
                            <option value="Argentina" />
                            <option value="Brasil" />
                            <option value="Belgica" />
                            <option value="Dinamarca" />
                            <option value="Colombia" />
                            <option value="Espa&ntilde;a" />
                            <option value="Francia">
                            <option value="Holanda">
                            <option value="M&eacute;xico" />
                            <option value="Per&uacute;" />
                            <option value="Portugal">
                            <option value="Otro país" /> 
                        </datalist>
                    </td>
                </tr>
 
<input type="submit" name="enviar" value="Enviar Datos" />
</table>

Bien lo he probado realizando un IF de este tipo pero no me surge efectos.

Código Javascript:

Ver originalif(form1.pais.value=="") {
alert('Error: [ " Selecciona un pais europeo " ]');
form1.pais.focus();
return(false);
}

Seguiré buscando más por Internet espero un poco de ayuda o guías.

Tocó pocos codes de JScript, me resulta más fácil PHP jeje.

PHPeros · #2 (**permalink**) 29/04/2015, 11:50

La vieja alternativa es usar un select, así nunca se puede equivocar

La otra forma es usar JS:

http://stackoverflow.com/questions/2...html5-datalist

HackID1 · #3 (**permalink**) 29/04/2015, 12:29

Buenas PHPeros.

Gracias por responder tan pronto,, he intentado usar el código que me suministras en la web pero no me funciona o no se hacerlo funcionar, he seguido buscando otros códigos.

Encontré este pero tampoco válida correctamente en JScript.

(COPIAR EN UN NUEVO DOC HTML PARA PROBAR)

Código Javascript:

Ver original<form action='' method='POST' id='datos' name='datos'>
<div id='input_dato'>
<label for='dato'>Dato Requerido:</label>
<input type='text' name='dato' id='dato' list='nombres' required oninput='verificar(this)'>
<input type='submit' name='boton' id='boton'>
<datalist id='nombres'>
 
<option value='LIGHT' class='nombre'/>
<option value='VEGETA' class='nombre'/>
<option value='IKKI' class='nombre'/>
<option value='EDEN' class='nombre'/>
 
</datalist>
</div>
</form>
<script>
    //Esta función se encargará de realizar la validación de los datos
    function verificar(input){
//Primero guardamos en una variable temporal el valor del input que se desea validar
     var valor=input.value;
//Luego se verifica si el usuario intenta enviar el campo vacío
     if(valor.length==0){
//Si el campo está vacío modificamos el mensaje que deseamos que muestre el navegador
//Este paso es opcional
     input.setCustomValidity('Debe ingresar un nombre');
     }else{
//Si el campo no está vacío, procedemos a validar la información
//Guardamos el valor de todos los datos presentes en el datalist en un arreglo temporal
var cis=document.querySelectorAll('#input_datos .nombre');
//Leemos cuantos elementos incluye el arreglo cis
     var n=cis.length;
//Esta es una variable temporal que se usará en el análisis del arreglo cis
     var valorT;
//Es una variable bandera que indicará si el datos suministrado está en la lista
     var bandera=0;
//Recorremos cis
     for(var i=0;i<n;i++){
//Guardamos el iésimo valor de cis en la variable temporal valorT
     valorT=cis[i].value;
     //Comparamos el valor suministrado con valorT
     if(valor==valorT){
//Si son iguales el valor de la bandera cambia a uno
     bandera=1;
//Interrumpimos el ciclo
break;
     }      
 
     }
//Si la bandera es igual a uno el dato es válido y se podrá usar para cualquier función específica
     if(bandera==1){
//Con esta línea eliminamos la validación de este input
     input.setCustomValidity('');
     }else{
//Si no se encontró el valor podemos "lanzar" un mensaje indicando el error
     input.setCustomValidity(valor+' no existe en la lista sugerida');
     }      
 
     }
     
    }
    </script>

Cómo puedo hacer funcionar uno de los dos códigos, esto de los datalist jeje, lo tenía un poco perdido la verdad.

Gracias saludos

PHPeros · #4 (**permalink**) 29/04/2015, 13:22

Seguro que fallaba porque usas HTML entities, y JavaScript las interpreta tal cual. De todas formas pongo como sería:

Código HTML:

Ver originalPaís:
<input id="lista" name="pais" list="paises">
<datalist id="paises">
    <option value="Alemania">
    <option value="Argentina">
    <option value="Brasil">
    <option value="Belgica">
    <option value="Dinamarca">
    <option value="Colombia">
    <option value="España">
    <option value="Francia">
    <option value="Holanda">
    <option value="México">
    <option value="Perú">
    <option value="Portugal">
    <option value="Otro país"> 
</datalist>
 
 
<input type="button" name="enviar" value="Enviar Datos" onclick="comprobar()">

Código Javascript:

Ver originalvar text = document.getElementById("lista"),
    element = document.getElementById("paises");
 
function comprobar(){
    if(element.querySelector("option[value='"+text.value+"']"))
        alert("Bien");
    else
        alert("Mal");
}

DEMO

HackID1 · #5 (**permalink**) 29/04/2015, 14:55

Buenas.

Lo he probado y no me ha funcionado, es un poco raro pero adjunto el código completo para ver si hay algún error.

Código HTML:

Ver original<html>
 
<head> 
        <title> Config.Html </title>
        
        <link rel="styleSheet" href="css/iroom.css" type="style/css" />
        
        <script>
        
        var text = document.getElementById("pais"),
        element = document.getElementById("paises");
            
        function comprobar(){
            if(element.querySelector("option[value='"+text.value+"']"))
                alert("Bien");
            else
                alert("Mal");
        }
             
        </script>
</head>
 
<body>
 
    <!--  div contenedor -->
    <div id="contenedor3">
        
        <h1 id="titulo"> Smart Room Project </h1>
        
        <div id="menu"> 
            <ul>
                <li> <a href="minombre2.html">Nombre </a> </li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <li> <a href="config2.html">Configuraci&oacute;n </a></li>              
            </ul>
        </div>
            
        
        <table width="100%" align="center">
            <tr>
                <td> 
                    <h2 id="habitacion"> Datos de la Habitaci&oacute;n  </h2>
                    <br/>
                    
                    <div id="datos_center">
                        <form method="post" action="datos.js" name="form1">
                        
                        <table width="100%" align="center">
                            <tr>
                                <td> <label>Pa&iacute;s:</label>  </td>
                                <td> <input id="pais" name="pais" list="paises" />
                                    <datalist id="paises">
                                        <option value="Alemania">
                                        <option value="Argentina" />
                                        <option value="Brasil" />
                                        <option value="Belgica" />
                                        <option value="Dinamarca" />
                                        <option value="Colombia" />
                                        <option value="Espa&ntilde;a" />
                                        <option value="Francia">
                                        <option value="Holanda">
                                        <option value="M&eacute;xico" />
                                        <option value="Per&uacute;" />
                                        <option value="Portugal">
                                        <option value="Otro país" /> 
                                    </datalist>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Ciudad: 
                                </td>
                                <td>
                                    <input type="text" name="ciudad" value="" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Coordenadas GPS:
                                </td>
                                <td>
                                    <input type="text" name="gps" value="" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Mapa URL:
                                </td>
                                <td>
                                    <input type="text" name="url" value="" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Foto:
                                </td>
                                <td>
                                    <input type="file" name="foto" value="" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Password:
                                </td>
                                <td>
                                    <input type="password" name="pass" value="" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Foto:
                                </td>
                                <td>
                                    <input type="file" name="foto" value="" />
                                </td>
                            </tr>
                        </table>
                            
                </td>
                <td> 
                        <h2 id="title_sensor">Seleccione los sensores </h2>
                        
                             <input type="checkbox" name="temperatura" value="" /> Temperatura
                        <br/>
                             <input type="checkbox" name="humedad" value="" />Humedad 
                        <br/>
                            <input type="checkbox" name="ruido" value="" /> Nivel de Ruido 
                        <br/>
                            <input type="checkbox" name="luz" value="" /> Nivel de luz 
                        <br/>
                             <input type="checkbox" name="mov" value="" /> Movimiento 
                        <br/>
                            <input type="checkbox" name="color" value="" /> Color iluminaci&oacute;n 
                        <br/>
                        <h2 id="title_sensor">Configure alertas </h2>
                            Temperaturas M&aacute;ximas: <br/>
                                <select name="maximas" style=" width:130px;">
                                      <option value="45">45</option>
                                      <option value="40">40</option>
                                      <option value="35">35</option>
                                      <option value="30">30</option>
                                      <option value="25">25</option>
                                      <option value="20">20</option>
                                      <option value="15">15</option>
                                      <option value="11">11</option>
                                      
                                </select>
                            <br/>
                            Temperaturas M&iacute;nimas: <br/>
                                <select name="maximas" style=" width:130px;">
                                      <option value="-2">-2</option>
                                      <option value="-1">-1</option>
                                      <option value="0">0</option>
                                      <option value="1">1</option>
                                      <option value="2">2</option>
                                      <option value="3">3</option>
                                      <option value="4">4</option>
                                      <option value="5">5</option>
                                      <option value="6">6</option>
                                      <option value="7">7</option>
                                      <option value="8">8</option>
                                      <option value="9">9</option>
                                      <option value="10">10</option>
                                </select>
                                
                        </div>  <!--end div de formulario -->
                            <br/><br/><br/>
                </td>
            </tr>
                
            <tr>
                <td align="center" colspan="2">
                    <input type="button" name="enviar" value="Enviar Datos"  onclick="comprobar()" />
                    
                    </form>
                    <br/><br/>
                    <a href="index2.html">Volver a p&aacute;gina Principal.</a>
                </td>
            </tr>
        </table>
        
    </div>
    <!-- end div contenedor -->
 
        <div id="pie">
            Universidad de Alcalá.
        </div>
    
</body>
 
</html>

Muchas Gracias por tu ayuda.

Alexis88 · #6 (**permalink**) 30/04/2015, 00:20

No funciona porque no estás tomando a los elementos ya que aún no existen en el momento en el que se ejecutan esas dos primeras líneas de código JavaScript (no JScript que es otra cosa). Ejecuta dicho código cuando se haya cargado el DOM o la ventana completa, para lo cual puedes usar eventos como DOMContentLoaded o load o simplemente colocando dicho código después de todos los elementos del documento y antes de la etiqueta </body>.

Saludos

HackID1 · #7 (**permalink**) 01/05/2015, 14:11

Es verdad, de nuevo mil gracias Alexis88, siempre que has podido me ayudas con muchas dudas básicas y avanzadas.

Y claro, por lo que veo en JavaScript, es bastante importante la colocación del código antes o después de los elementos, ya me ha sucedido varias veces, espero tenerlo la próxima vez en cuenta.

Y una duda que me surgió que bueno leeré ahora mismo la diferencia entre JavaScript y JScript, pensaba que era lo mismo jeje, lo siento mi ignorancia en ello, ahora mismo buscaré la info, y me aclararé las dudas.

Mil gracias a toda la comunidad Forosdelweb.