How can I do a select validation in JavaScript to force one of the options?

0

Yes, I saw that there are many "LOOKING" questions but none of the answers given seemed to work. So I came here to show my doubt. Although I have tested many codes. I believe the error is either because it's old answers or that it has some version mismatch.

Well, I'll post the code so you can understand:

<html>
<head>
    <title>TextoModificadorDeEstilos</title>
    <meta charset="UTF-8"/> 
</head>
    <body>
        <h1>Formulário!</h1>


        <form name="formTrab" id="formTrabId" method="POST" action="/clientes">
    <fieldset><legend>Dados pessoais</legend>
        <label>Nome:</label>
        <br>
        <input type="text" name="nome" id="nomeId" placeholder="Digite seu nome" required="" maxlength="30" size="30">
        <br><br>
        <label>Endereço:</label>
        <br>
        <input type="text" name="endereco" id="enderecoId" placeholder="Digite seu endereço" required="" maxlength="50" size="50">
        <br>
        <label>Cidade:</label>
        <br>
        <input type="text" name="cidade" id="cidadeId" placeholder="Digite sua cidade" required="" maxlength="50" size="50">
        <br>
        <br>
        Estado:
        <select name="estado" id="estadoId" onBlur="validaFormulario()">
        <option value=""></option>
        <option value="Rio">Rio de Janeiro</option>
        <option value="SP">SãoPaulo</option>
        <option value="Floripa">Floriánopolis</option>
        <option value="Fortaleza">Fortaleza</option>
        <option value="Minas">Minas Gerais</option>
        <option value="Salvador">Salvador</option>
        <option value="Porto">Porto Seguro</option>
        </select>
    </fieldset>

<fieldset><legend>Dados profissionais</legend>
        <label>Natureza do Cargo:</label>
        <br>
    Gerência<input id ="gerenciaId" name="gerencia" type="radio" value="1" checked>
    Financeiro<input id ="financeiroId" name="financeiro" type="radio" value="2">
    Recepção<input id ="recepcaoId" name="recepcao" type="radio" value="3">
    Administrativo<input id ="administrativoId" name="administrativo" type="radio" value="4" checked>
    Juridico<input id ="juridicoId" name="juridico" type="radio" value="5">
        <br><br>
        <label>Area de interesse:</label>
        <br>
    <input id ="computacaoId" name="computacao"  type="checkbox" value="1" checked>Computação
    <input id ="biologiaId" name="biologia" type="checkbox" value="2">Biologia
    <input id ="meioAmbienteId" name="meioAmbiente" type="checkbox" value="3">Meio Ambiente
    <input id ="engenhariaId" name="engenharia" type="checkbox" value="4" checked>Engenharia
    <input id ="historiaId" name="historia" type="checkbox" value="5">História
        <br>
        Mini-currículo: <textarea name="curriculo" id="curriculoId" style="height:140px; width: 350px;" ></textarea><br>
    </fieldset>
    <br><br>
    <input type="submit" value="Enviar" id="enviarId">
    <input type="reset" value="Limpar" id="enviarId">

</form>

        <script>
        function validaFormulario(){
            var nome = formTrab.nome.value;
            var endereco = formTrab.endereco.value;
            var cidade = formTrab.cidade.value;
            var estado =formTrab.estado.value;

            if(nome.length <10){
                alert('Preencha o campo nome com no mínimo 10 letras .');
                formTrab.nome.focus();
                return false;
            }

            if(enderecoId.length <20){
                alert('Preencha o campo endereço com no mínimo 20 letras.');
                formTrab.endereco.focus();
                return false;
            }

            if(cidade == ""){
                alert('Preencha o campo senha com minimo 6 caracteres');
                formTrab.cidade.focus();
                return false;
            }


            if(estado==""){
                alert('Escolha um estado');
                formTrab.estado.focus();
                return false;
            }*/
        }
        </script>
    </body>
</html>

Now this is the question that does not work, my form is able to identify and ask the user to write in the empty fields. However, when the select is empty, there is no validation impediment. I've tried several solutions that have here on the site. But I think because of being a beginner and not having knowledge of technologies like Jquery or other names that I can not remember but relate to the "theme." The reason why I may not have understood the other answers is justified.

    
asked by anonymous 18.10.2018 / 22:46

1 answer

2

  function vazio() {
     var x;
     x = document.getElementById("estadoId").value;
     if ((x == "")||(x == null)) {
        alert("Selecione uma opção");
        return false;
     };
  }
        <select name="estado" id="estadoId" onBlur="return vazio()">
        <option value=""></option>
        <option value="Rio">Rio de Janeiro</option>
        <option value="SP">SãoPaulo</option>
        <option value="Floripa">Floriánopolis</option>
        <option value="Fortaleza">Fortaleza</option>
        <option value="Minas">Minas Gerais</option>
        <option value="Salvador">Salvador</option>
        <option value="Porto">Porto Seguro</option>
        </select>
    
  

The function tb can be triggered in <input type="submit" value="Enviar" id="enviarId" onClick="return vazio()">

  function vazio() {
     var x;
     x = document.getElementById("estadoId").value;
     if ((x == "")||(x == null)) {
        alert("Selecione uma opção");
        return false;
     };
  }
        <select name="estado" id="estadoId">
        <option value=""></option>
        <option value="Rio">Rio de Janeiro</option>
        <option value="SP">SãoPaulo</option>
        <option value="Floripa">Floriánopolis</option>
        <option value="Fortaleza">Fortaleza</option>
        <option value="Minas">Minas Gerais</option>
        <option value="Salvador">Salvador</option>
        <option value="Porto">Porto Seguro</option>
        </select>

<input type="submit" value="Enviar" id="enviarId"  onClick="return vazio()">
    
    
18.10.2018 / 22:55