find () is not looking for all input's

Question

find () is not looking for all input's

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

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

The input of type text is not undergoing validation and it is ignored (jump right to the next question without validating this text input).

Continuing on questão A , if I enter this text input above the input radio with the value = YES, the text input is validated and the radio input is not validated (jump 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;
                    }
                }
            });

The problem jsfiddle follows: link

javascript jquery

asked by anonymous 11.04.2016 / 16:49

2 answers

What is the best way to do calculation between attributes of a model, to display in the view? Error generating title from references section when using amsmath package

score 0 · Answer 1

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

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

In order for you to check all, you need to iterate this object in .each() , thus:

$("#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 text type will be displayed in the alert.

score 0 · Answer 2

Given your Code, the simplest way to check all input types and the rules you want to apply.

In addition, for the input text field "inside" of the input radio, which needs to be selected to be validated, I found the following logic:

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

Example:

input radio id="PgA _"
input text id="PgA"

So when jquery looks for an element with the id "PgA", It 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
                      }
                  }     
      });        
});