Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Invio form non funziona dopo controllo validità dati inseriti

    Ciao,

    ho un form e un codice JS che ho trovato come esempio per il controllo dei dati inseriti prima dell'invio.
    Il controllo avviene correttamente ma quando tutti i dati sono corretti, l'invio del form non avviene.
    Chi mi può aiutare?
    Questo é il codice JS:

    $(document).ready(function() {
    $('#first_form').submit(function(e) {

    e.preventDefault();

    var name = $('#name').val();
    var surname = $('#name').val();
    var address1 = $('#address1').val();
    var cap = $('#cap').val();
    var location = $('#location').val();
    var ean = $('#ean').val();
    var email = $('#email').val();
    var phone = $('#phone').val();
    var password = $('#password').val();
    $(".error").remove();
    if (name.length < 1) {
    $('#name').attr('placeholder','Introduire le prénom');
    $('#name').css("color","red");
    }
    if (surname.length < 1) {
    $('#surname').attr('placeholder','Introduire le nom');
    $('#surname').css("color","red");
    }
    if (address1.length < 1) {
    $('#address1').attr('placeholder','Introduire adresse');
    $('#address1').css("color","red");
    }
    if (cap.length < 4) {
    $('#cap').val('');
    $('#cap').attr('placeholder','Introduire le NPA (4 chiffres)');
    $('#cap').css("color","red");
    }
    if (location.length < 1) {
    $('#location').attr('placeholder','Introduire le lieu');
    $('#location').css("color","red");
    }
    if (ean.length < 13) {
    $('#ean').val('');
    $('#ean').attr('placeholder','Introduire le EAN (13 chiffres)');
    $('#ean').css("color","red");
    }
    if (phone.length < 1) {
    $('#phone').attr('placeholder','Introduire le téléphone');
    $('#phone').css("color","red");
    }

    if (email.length < 1) {
    $('#email').attr('placeholder','Introduire adresse email');
    $('#email').css("color","red");
    } else {
    var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var validEmail = regEx.test(email);
    if (!validEmail) {
    $('#email').val('');
    $('#email').attr('placeholder','Introduire une adresse email valide');
    $('#email').css("color","red");
    }
    }
    if (password.length < 6) {
    $('#password').val('');
    $('#password').attr('placeholder','Le mot de passe doit avoir au moins 6 caractères');
    $('#password').css("color","red");
    }
    });
    });

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ciao, l'errore è dovuto al fatto che viene fatto un submit sulla form appena la pagina ha finito di caricare il DOM ma e' sbagliato.
    Devi usare l'evento submit sulla form cosi':

    codice:
    $('#myFormID').on('submit', function(e){
      e.preventDefault(); //Stop submit.
    
      //qui i  controlli vari....
    
      //se non ci sono errori esegui il submit con:
     
    $(this).submit();
    
    });

  3. #3
    Ciao , grazie per la risposta.

    Adesso ho modificato come da tue indicazioni (vedi sotto) ma il form non parte ugualmente.
    Ho verificato l'ID del form ed é quello giusto.

    $(document).ready(function() {
    $('#first_form').on('submit', function(e){
    e.preventDefault(); //Stop submit.
    var name = $('#name').val();
    var surname = $('#name').val();
    var address1 = $('#address1').val();
    var cap = $('#cap').val();
    var location = $('#location').val();
    var ean = $('#ean').val();
    var email = $('#email').val();
    var phone = $('#phone').val();
    var password = $('#password').val();
    $(".error").remove();
    if (name.length < 1) {
    $('#name').attr('placeholder','Introduire le prénom');
    $('#name').css("color","red");
    }
    if (surname.length < 1) {
    $('#surname').attr('placeholder','Introduire le nom');
    $('#surname').css("color","red");
    }
    if (address1.length < 1) {
    $('#address1').attr('placeholder','Introduire adresse');
    $('#address1').css("color","red");
    }
    if (cap.length < 4) {
    $('#cap').val('');
    $('#cap').attr('placeholder','Introduire le NPA (4 chiffres)');
    $('#cap').css("color","red");
    }
    if (location.length < 1) {
    $('#location').attr('placeholder','Introduire le lieu');
    $('#location').css("color","red");
    }
    if (ean.length < 13) {
    $('#ean').val('');
    $('#ean').attr('placeholder','Introduire le EAN (13 chiffres)');
    $('#ean').css("color","red");
    }
    if (phone.length < 1) {
    $('#phone').attr('placeholder','Introduire le téléphone');
    $('#phone').css("color","red");
    }

    if (email.length < 1) {
    $('#email').attr('placeholder','Introduire adresse email');
    $('#email').css("color","red");
    } else {
    var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var validEmail = regEx.test(email);
    if (!validEmail) {
    $('#email').val('');
    $('#email').attr('placeholder','Introduire une adresse email valide');
    $('#email').css("color","red");
    }
    }
    if (password.length < 6) {
    $('#password').val('');
    $('#password').attr('placeholder','Le mot de passe doit avoir au moins 6 caractères');
    $('#password').css("color","red");
    }

    $(this).submit();

    });
    });

  4. #4
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ok scusa mi sono confuso su una cosa.. mi manca una parte....
    Il submit alla fine sara' un invio dati tramite Ajax al posto del classico ricaricamento pagina o che?
    Perchè in questo caso la gestione può essere un minimo differente.
    Ultima modifica di m4rko80; 21-09-2018 a 15:20

  5. #5
    Non ti saprei rispondere. Non sono molto ferrato in JavaScript.
    Ti posso dire che l'invio dei dati dovrebbe avvenire tramite il metodo POST del form.
    Ho provato con il debug ma non mi da nessun errore in particolare.
    Ho provato anche a sostituire il "this" come avevi detto prima con l'ID effettivo, ma niente da fare.
    Sono 2 giorni che provo e non arrivo as una soluzione

  6. #6
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Hai la possibilità si usara Ajax(jQuery ajax)?
    Solitamente si blocca un submit con jQuery per gestire la chiamata in modo asyncrono e quindi fare tutto senza ricarica la pagina.
    E' più performante e ti permette di non resettare la form.

    Dai un occhiata a http://api.jquery.com/jquery.ajax/ o cerca esempi pratici tipo questo https://www.sanwebe.com/2016/07/ajax...s-using-jquery

    Non e' difficile da implementare

  7. #7
    Giusto per informazione:
    se io sostituisco

    $('#first_form').on('submit', function(e){

    con

    $('#first_form').on('click', function(e){

    Il dati vengono spediti ma praticamente non mi passa per la procedura di controllo

    Può essere di aiuto?

  8. #8
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    L'evento di solo click equivale ad un click qualsiasi col mouse sull'elemnto. Quindi non per forza sarà il submit.
    Puoi aggirare la questione in diversi modi. La migliore sarebbe quella appunto di usare Ajax per eseguire il submit finale senza ricaricare il tutto.
    Se vuoi un consiglio io userei una libreria gia' fatta di validazione tipo questa http://parsleyjs.org/doc/index.html, ha un sacco di opzioni ed è ben fatta. Non ti serve aggiungere HTML o CSS custom.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.