0

Tenho um série de questionários em que todos os campos devem ser respondidas obrigatoriamente, o problema é que alguns inputs não estão como campo obrigatório, como no exemplo abaixo:

O input de tipo text não está passando pela validação e ele é ignorado (pula-se direto para a próxima questão sem validar esse input de texto).

Continuando sobre a questão A, se eu colocar esse input de texto acima do input radio com o valor = SIM, o input de texto passa a ter validação e o input de radio não é validado (pula-se para a próxima questão).

    <!-- INICIO PERGUNTA A -->
    <div class="questao questao-A">
        <p class="pergunta">A - PG A
        </p>

        <div class="split-list">

            <ul class=" list-group">

                <li class="list-group-item list-group-item-success">
                    <label><input type="radio" name="pgA" value="SIM" /> SIM </label>
                    <p class="alert alert-success pgA_qual"><label>Qual ? </label>
                        <input type="text" name="pgA_qual" class="form-control" value=""/>
                    </p>
                </li>
                <li class="list-group-item list-group-item-success"><label><input type="radio" name="pgA" value="NÃO" /> NÃO </label></li>

            </ul>
        </div>
    </div>
    <!-- FIM PERGUNTA A -->



        $(".bloco-atual").find(".questao").each(function(){
                var __thisQuestao = $(this);
                var __thisElement =__thisQuestao.find(":input");
                var thisElementoType = __thisElement.attr("type");
                var thisElementoName = __thisElement.attr("name");
                // TIPO INPUT
                if(thisElementoType === 'radio') {
                    if($("[name='"+thisElementoName+"']").is(":checked")){
                        //faz algo
                    } else {
                        alert("n checkado");
                        scrollTop(__thisQuestao);
                        return false;
                    }
                } else
                if(thisElementoType === 'text') {
                    alert(thisElementoName);
                    if($("[name='"+thisElementoName+"']").val() === ""){
                        alert("valor vazio");
                        scrollTop(__thisQuestao);
                        return false;
                    }
                }
                // TIPO TEXTAREA
                var thisName =__thisQuestao.find("textarea").attr("name");
                if($("[name='"+thisName+"']").hasClass("obriga")){
                    if($("[name='"+thisName+"']").val() === ""){
                        alert("valor vazio");
                        scrollTop(__thisQuestao);
                        return false;
                    }
                }
            });

Segue o jsfiddle do problema: https://jsfiddle.net/6rzn6vjg/

1
  • só uma pergunta, tu não pode usar o required pra facilitar a validação?
    – haykou
    Commented 11/04/2016 às 16:31

2 Respostas 2

0

Veja, nesta linha você vai obter um objeto com os inputs do tipo radio e text

var __thisElement =__thisQuestao.find(":input");

Para que você possa verificar todos, precisa iterar esse objeto num .each(), ficando assim:

$("#btn-proximo").click(function() {
    _thisBloco = $(".bloco-atual");
    var strBlocoAtual = "bloco-atual";
    if(_thisBloco.hasClass(strBlocoAtual)){
        var tamanhoClassQuestao = _thisBloco.find(".questao").length;
        $(".bloco-atual").find(".questao").each(function(){
            var __thisQuestao = $(this);
            var __thisElement =__thisQuestao.find("input[type=text], input[type=radio]");

            __thisElement.each( function () {
                   alert( $( this ).attr('type') )
            })
        });
    }
});   

Execute o código e verá que o tipo text vai ser exibido no alert.

3
  • ente colocar no meu código do jsfiddle e verifique, não deu certo...
    – carlos
    Commented 11/04/2016 às 15:24
  • Da uma olhada no novo código.
    – Duque
    Commented 11/04/2016 às 16:11
  • De fato a falta de iteração dos inputs é um dos problemas. Commented 11/04/2016 às 17:12
0

Visto seu Codigo, a uma manteira mais simples de verificar todos os tipos de input e as regras que você deseja aplicar.

Alem disso, para o caso do input text "dentro" do input radio, que necessita estar selecionado para que seja valida-lo, encontrei a seguinte lógica:

Caso o input text esteja atrelado a algum input Radio , Ex: Na pergunta "A- PG A" existe os radios Sim / Não , Onde o radio Sim existe o input text. Sendo assim, colocamos o input Radio Sim com um ID e o Input text Com um ID Semelhante para que possamos verificar se o input text percente ao Input Radio.

Exemplo:

  • input radio id="PgA_"
  • input text id="PgA"

Assim quando o jquery procurar por um elemto com o id "PgA", Ele ira encontrar "PgA_" e verificar se está checked.

Código:

<input type="radio" id="PgA_" name="pgA" value="SIM" />
<input type="text" id="PgA" name="pgA_qual" class="form-control" value=""/>

$("#btn-proximo").click(function() {
      $('.questao').find("input").each(function() {
                  if ($(this).is(":radio")) {  
                      if($(this).is(":checked")){
                          //Faz Algo                        
                      }else{
                         //Faz Algo
                      }  
                  }else if($(this).is(":text")){
                      //Caso o input text pertença a um input radio
                      if($('[id^="'+$(this).attr("id")+'"]').is(":checked")){
                         if($(this).val() == ""){
                          // Faz Algo
                         }
                      }else{
                         // Faz Algo
                      }
                  }     
      });        
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .