How can I do a <select> validation in Javascript to force one of the options to be checked?

Asked

Viewed 212 times

0

Yes, I saw that it has many "SIMILAR" questions but none of the answers given seemed to work. That’s why I came here to show my doubt. Although I have tested many codes. I believe the error is because they are old answers or have some version incompatibility.

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 here’s the question that doesn’t work, my form is able to identify and ask the user to write in the empty fields. However, when select is empty, there is no validation impediment. I have tried several solutions that you have here on the site. But I think because I’m a beginner and I have no knowledge of technologies like Jquery or other names that I can’t even remember but relate to the "theme". Justifies why I might not have understood anything in the other answers.

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>
    

tb function can be triggered in the <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()">
    

Browser other questions tagged

You are not signed in. Login or sign up in order to post.