find() is not searching for all input’s

Question

I have a series of questionnaires in which all fields must be answered, the problem is that some inputs are not required, as in the example below:

The input type text is not going through validation and it is ignored (skips straight to the next question without validating this text input).

Continuing on the questão A, if I put this text input above the radio input with the value = YES, the text input is validated and the radio input is not validated (skip to the next question).

    <!-- 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;
                    }
                }
            });

Follow the jsfiddle of the problem: https://jsfiddle.net/6rzn6vjg/

Answer 1

See, in this line you will get an object with inputs of type radio and text

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

In order for you to verify all, you need to iterate this object into one .each(), being like this:

$("#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') )
            })
        });
    }
});   

Run the code and you will see that the type text will be displayed in Alert.

Answer 2

Given your Code, a simple manteira to check all types of input and the rules you want to apply.

Also, in the case of input text "inside" the radio input, which needs to be selected to validate it, I found the following logic:

If input text is tied to some Radio input , Ex: In question "A- PG A" there are radios Yes / No , where radio Yes there is input text. So we put the Radio Yes input with an ID and Input text With a similar ID so we can check the input text to the Input Radio.

Example:

• radio input id="Pga_"
• input text id="Pga"

So when jquery searches for an elemto with the id "Pga", He will find "Pga_" and check if it is checked.

Code:

<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
                      }
                  }     
      });        
});