Problema con controllo form in real time

migo80

Utente Attivo
25 Apr 2013
243
3
18
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:

JavaScript:
                                                            $(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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Non hai inserito il codice!!!
 

migo80

Utente Attivo
25 Apr 2013
243
3
18
Ciao intendi anche il markup html?

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

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
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

Utente Attivo
25 Apr 2013
243
3
18
Ciao ho modificato lo script così:

Codice:
$(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

Utente Attivo
6 Giu 2018
616
58
28
20
Vicenza
Prova a rimettere questa riga ma cambiata così:
HTML:
$(".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

Utente Attivo
25 Apr 2013
243
3
18
Posso dire di aver risolto in questo modo:
Codice:
$(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);
       }
                                                                  
 });
 
Discussioni simili
Autore Titolo Forum Risposte Data
T problema strano con procedura di controllo da database, di dati immessi in un form asp Classic ASP 5
D Problema con funzione preg_match() per controllo email PHP 2
K problema con il Controllo A Schede. Aiuto! MS Access 0
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
N Problema con position absolute e overflow HTML e CSS 4
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
K [PHP] Problema con variabili concatenate. PHP 1
O problema con query PHP 4
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema con eccessiva nitidezza apertura Camera Raw Photoshop 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7

Discussioni simili