Problema con controllo form in real time

[migo80]

Buongiorno, come da titolo non riesco a trovare una soluzione per effettuare un controllo sui campi input e in particolare nel tipo radio, in pratica il controllo funziona solo sui campi type=text di seguito il codice script:

                                                            $(document).ready(function(){
                                                                $(".f1 input, #s1.input[type='radio'], #s2.input[type='radio'], #ff1.input[type='radio'], #ff2.input[type='radio']").change( function(){
                                                                    var has_error = false;
                                                                    $(".f1 input.required, #s1.input[type='radio'], #s2.input[type='radio'], #ff1.input[type='radio'], #ff2.input[type='radio']").each(function(){
                                                                        if($(this).val() == '' || $("#s1 input:radio[value='M'][name='sesso']").is('checked',false) && $("#s2 input:radio[value='F'][name='sesso']").is('checked',false) && $("#ff1 input:radio[value='S'][name='figli']").is('checked',false) && $("#ff2 input:radio[value='N'][name='figli']").is('checked',false)) {
                                                                            $(this).css('border','1px solid red');
                                                                            has_error = true;
                                                                           
                                                                        }
                                                                        else{
                                                                                $(this).css('border','');
                                                                               
                                                                        }
                                                                    });
                                                                    if(has_error == false) {
                                                                        $("#n1").prop('hidden', false);
                                                                    }
                                                                    else {
                                                                            $("#n1").prop('hidden',true);
                                                                    }
                                                                   
                                                                   
                                                                   
                                                                   
                                                                });
                                                               
                                                               
                                                               
                                                               
                                                           
                                                            });

qualcuno sa come risolvere e dove sbaglio?
Il codice dovrebbe mostrare un pulsante solo se tutti i campi sono compilati.

 

[Max 1]

Non hai inserito il codice!!!

 

[migo80]

Ciao intendi anche il markup html?

<form>
<div  id="f1" class="row f1">
                                                
                                                <div class="col">
                                                    
                                                <div class="form-group">   
                                                  <input type="text" name="nome" class="form-control form-control-sm mb-3 required" placeholder="Nome">
                                                  
                                                  <input type="text" name="cognome" class="form-control form-control-sm mb-3 required" placeholder="Cognome">
                                                  
                                                   <p class="col-form-label d-inline pr-5" >Sesso:</p>
                                                   <input class="form-check-input d-inline" type="radio" name="sesso" id="s1" value="M">
                                                      <label class="form-check-label pr-4" for="ss1">
                                                        M
                                                      </label>
                                                      <input class="form-check-input d-inline pl-3" type="radio" name="sesso" id="s2" value="F" >
                                                      <label class="form-check-label" for="ss2">
                                                        F
                                                      </label>
                                                      
                                                 <input type="text" name="data_nascita" class="form-control form-control-sm mt-3 mb-3 required" placeholder="Data di Nascita formato gg/mm/anno">
                                                
                                                 <input type="text" name="luogo_nascita" class="form-control form-control-sm mb-3 required" placeholder="Luogo di Nascita">
                                                
                                                  <input type="text" name="residenza" class="form-control form-control-sm mb-3 required" placeholder="Comune di residenza">
                                                  
                                                </div>
                                                    
                                                </div>
                                                
                                                <div class="col">   
                                                <div id="f2" class="form-group f1">
                                                
                                                  <input type="text" name="lavoro" class="form-control form-control-sm mb-3 required required" placeholder="Lavoro">
                                                  
                                                  <input type="text" name="stato_civile" class="form-control form-control-sm mb-3 required" placeholder="Stato Civile">
                                                  
                                                   <p class="col-form-label d-inline pr-5" >Figli:</p>
                                                   <input class="form-check-input d-inline" type="radio" name="figli" id="ff1" value="Si">
                                                      <label class="form-check-label pr-4" for="f1">
                                                        Si
                                                      </label>
                                                      <input class="form-check-input d-inline pl-3" type="radio" name="figli" id="ff2" value="No">
                                                      <label class="form-check-label" for="f2">
                                                        No
                                                      </label>
                                                    
                                                    <input type="text" name="telefono" class="form-control form-control-sm mt-3 mb-3 required" placeholder="Telefono">
                                                    
                                                    <input type="text" name="mail" class="form-control form-control-sm mb-3 required" placeholder="E-mail">
                                                    
                                                  
                                                  <input type="text" name="data_inserimento" class="form-control form-control-sm  mb-3 required" id="datepicker" placeholder="Data Inserimento" >
                                                  
                                                </div>
                                                    
                                                </div>
                                                
                                             </div>
</form>
                                            <div class="row d-flex justify-content-end">
                                                <div class="col-3 d-flex justify-content-center">
                                                    <a class="btn btn-outline-success" id="n1" href="#myCarousel" role="button" data-slide="next" hidden>
                                                  Prosegui
                                                </a>     
                                                </div>
                                            </div>

 

[Tommy03]

Hai controllato con un alert se il codice jquery riconosce l'onchange del radio? Mi convince poco dove scrivi "#s1.input...", non conosco benissimo ma non mi pare che vada il punto davanti a input

 

[migo80]

Ciao ho modificato lo script così:

$(document).ready(function(){
    $(".f1 input").change( function(){
    var has_error = false;
    $(".f1 input:text, input:radio").each(function(){
    if($(this).val() == '' || $(this).is(":checked",false)) {
    $(this).css('border','1px solid red');
        has_error = true;
        
    }
    else{
        $(this).css('border','');
        }
    });
        if(has_error == false) {
            $("#n1").prop('hidden', false);
        }
        else {
            $("#n1").prop('hidden',true);
        }
                                                                    
    });
                                                                
});

ma continua a vedere solo i campi text e non i radio.

 

[Tommy03]

Prova a rimettere questa riga ma cambiata così:

$(".f1 input[type='text'], input[type='radio'][name=sesso], input[type='radio'][name=figli]").change( function(){

Se non funziona, prova a fare qualche prova con degli alert e i radio presi singolarmente

 

[migo80]

Posso dire di aver risolto in questo modo:

$(document).ready(function(){
                                                                    
    $(".f1 input").change( function(){
        var has_error = false;
        $(".f1 input.required").each(function(){
        if(!$("input[type='radio']:checked").val() || $(this).val() == '') {
        $(this).css('border','1px solid red');
        has_error = true;
        }
        else{
          $(this).css('border','');
        }
            });
        if(has_error == false) {
            $("#n1").prop('hidden', false);
       }
        else {
          $("#n1").prop('hidden',true);
       }
                                                                  
 });