1

Sin poder modificar el HTML, solamente con Javascript realizar la siguiente operación:

Tengo un SELECT con cuatro posibilidades:

<select name="tipo" id="tipo">
    <option selected value="none">Elige uno...</option>         
    <option value="rock">Rock</option>
    <option value="pop">Pop</option>
    <option value="punk">Punk</option>
    <option value="indie">Indie</option>
</select>   

A la hora de enviar un formulario, NO me tiene que permitir enviarlo si elijo la primera opción, por defecto, cuyo texto es: "Elige uno...". ¿Cómo podría controlarse eso?

Código:

//Función que comprueba que no se elige la opción por defecto "Elige uno...".
function comprobarTipo(){
    if (!document.getElementById("tipo").value=="none"){ //Para comparar con el texto sería: .text="Elige uno..."
        var tipo = document.getElementById('tipo').value;
        return true;
    }else{
        document.getElementById("errores").innerHTML="El campo TIPO debe elegir una opción.";
        document.getElementById("tipo").focus();
        return false;
    }
}

Elija la opción que elija me muestra "El campo TIPO debe elegir una opción." en todas las opciones. ¿A qué se debe?

2
  • Crea un ejemplo mínimo verificable para ver cómo funciona comprobarTipo
    – Alvaro Montoro
    el 25 may. 2017 a las 12:28
  • @AlvaroMontoro Funciona cómo el ejemplo que has puesto pero sin utilizar HTML5 ni editar el HTML. Únicamente utilizando Javascript.
    – omaza1990
    el 25 may. 2017 a las 12:32

1 respuesta 1

3

Esto se puede controlar sin necesidad de JavaScript, sólo con HTML y la propiedad required de los campos para hacerlos obligatorios. Lo que tendrías que hacer es:

  1. Hacer que el select sea obligatorio poniéndole el atributo required
  2. Cambiar el valor de la opción "Elige uno..." de "none" a simplemente "" (cadena vacía)

Si el navegador soporta HTML5 y required (todos los navegadores modernos), se encargará de que el formulario no se pueda enviar hasta que esa lista desplegable tenga un valor válido (diferente de "").

Demo:

<form>
  <select name="tipo" id="tipo" required>
    <option selected value="">Elige uno...</option>
    <option value="rock">Rock</option>
    <option value="pop">Pop</option>
    <option value="punk">Punk</option>
    <option value="indie">Indie</option>
  </select>
  <input type="submit" value="enviar">
</form>


Ahora, si no quieres cambiar el HTML como pones en los comentarios abajo, y lo que quieres es solucionar la función JavaScript, el problema es fácil de identificar: El if en el que haces la comparación es un poco raro y falla. Ahora mismo haces:

if (!document.getElementById("tipo").value=="none"){ 

Esa mezcla de !, variable, comparación y valor no es buena. Parece que la precedencia de operadores te está jugando una mala pasada (se está ejecutando !document.getElementById("tipo").value antes de la comparación == y por eso siempre va a ser falso). En su lugar debería ser:

if (document.getElementById("tipo").value!="none"){ 

Y ya funciona como puedes ver en esta demo:

function comprobarTipo() {
  if (document.getElementById("tipo").value != "none") { //Para comparar con el texto sería: .text="Elige uno..."
    var tipo = document.getElementById('tipo').value;
    return true;
  } else {
    document.getElementById("errores").innerHTML = "El campo TIPO debe elegir una opción.";
    document.getElementById("tipo").focus();
    return false;
  }
}

document.querySelector("form").addEventListener("submit", function(e) {
	e.preventDefault();
});
<form>
  <select name="tipo" id="tipo">
    <option selected value="none">Elige uno...</option>
    <option value="rock">Rock</option>
    <option value="pop">Pop</option>
    <option value="punk">Punk</option>
    <option value="indie">Indie</option>
  </select>
  <div id="errores"></div>
  <input type="submit" value="enviar">
</form>

5
  • Es obligatorio hacerlo usando Javascript, no se puede editar el HTML que te ofrecen. Ahí mi duda.
    – omaza1990
    el 25 may. 2017 a las 12:28
  • Esa parte no viene en la pregunta ;)
    – Alvaro Montoro
    el 25 may. 2017 a las 12:29
  • @omaza1990 respuesta editada. El problema de tu función es la comparación que no es buena
    – Alvaro Montoro
    el 25 may. 2017 a las 12:34
  • Efectivamente. Tenía mal programada la condición del "if". Problema resuelto. Thanks.
    – omaza1990
    el 25 may. 2017 a las 12:36
  • Ademas añadiria el atributo disabled a la linea <option selected value="none">Elige uno...</option> haciendo así que esta opción no aparezca en el desplegable, aunque eso depende del tipo de aplicación que se este montando.
    – Hictus
    el 25 may. 2017 a las 15:58

Tu Respuesta

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

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