créer un évément loading au click

Salut,

Quand tu soumets ton form, tu as bien les logs dans ta console ? Tu n'as pas d'erreurs ?

Salut,
Et non je n'ai pas d'erreur tout marche très bien ! Mais la valeur du value du bouton "envoyé" ne changre pas quand les champs ne sont bien renseignés pour redevenir "envoyé", cose que j'aimerais arriver à faire !
Mon form :

<form method="POST" action="traitement.php" class="form" novalidate>

        <div class ="identif">
          <label for ="identif"></label>
          <span class =""> * </span>
          <input type ="text" name="identif" id="identif"  placeholder="Ex : alouette.mignonne"/>
          <span class = "error-message">error</span>
        </div><!-- endidentif -->

        <div class="mail">
            <label for="mail">Votre email :</label>
                 <span class=""> *</span>
                 <input type="email" name="mail" id="mail" placeholder="Ex: mignonne@hotmail.fr"/>
                 <span class = "error-message">error</span>
        </div><!-- endmail -->

        <div class="sender">
          <label for="envoi">
              <input type="submit" id="envoi" value="Continuer ..." />
          </label>
        </div>
      </form><!-- endForm -->

Salut !
Essai ceci :

app = {
     /*
    * Créer une popup
    * Fonction appelée au chargement du DOM
    */
    init: function() {
        console.info("app.init");

        // J'écoute le clic sur le bouton d'envoi...
        $("input[type=submit]").on("click", this.monSubmit);

    },

    /*
    * Handler du submit 
    */

    monSubmit: function(e){
        console.info("app.monSubmit")

        // On arrête le chargment de la page
        e.preventDefault()

        // Appel de la fonction pour la vérif...
        app.stopChamp()

     },

    stopChamp: function(){
        console.info("app.stopChamp")

        if($("input[type=submit]")){ // Start test

           // Appel au chargement
           app.btnProcess();

        if($("#identif").val() == "" ){
             // On sélectionne le span qui à la class : error-message avec ".next"
            app.showError($("#identif"), 'Veuillez bien renseigner le champ');
            valid = false;
           }
           else if(!$("#identif").val().match(/^[a-z]+$/i)){
             app.showError("#identif", "Nom dans l'url pas valide"); 
           }
           else{
            $("#identif").next(".error-message").fadeOut(1000)
           } 

           if($("#mail").val() == ""){
            app.showError($("#mail"), 'Veuillez bien renseigner le champ');
            valid = false;
           }
           else if(!$("#mail").val().match(/^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/)){
             app.showError("#mail", "Votre email n'est pas valide");  
           }
           else{
            $("#mail").next(".error-message").fadeOut(1000);
           }
           return valid;

        }// End test
     },

    showError: function(target,message){
       $(target).next(".error-message").fadeIn(2000).text(message); // Vu que l'on a une erreur...
       app.btnInit(); // On réinitialise le bouton submit 
    },

    btnProcess: function(){
        $("#envoi").attr("value", "Chargement ...").css({opacity: 0.4}).fadeIn(1000);
    },

    btnInit: function(){
       $("#envoi").attr("value", "Continuer...").css({opacity:1}).fadeIn(1000);
    }

}

/*
 * Chargement du DOM
 */
$(function(){
    app.init();
})

Je t'ai créé 3 nouvelles méthodes :
showError(), btnProcess() et btnInit().
, mais bon ça peut encore s'améliorer. d'ailleurs j'aime pas trop la façon dont tu nommes les noms de tes méthodes (monSubmit(), stopChamp()), il faut que ça soit à la fois parlant...

var $form = $('form');

$form.on('submit', function (e) {
    e.preventDefault();

    var $submitBtn = $('[type="submit"]', $form),
        oldValue = $submitBtn.val(); // On stocke la valeur initiale du bouton

    $submitBtn
        .val('Envoi en cours...') // On remplace la valeur du bouton
        .attr('disabled', 'disabled'); // On désactive le bouton pour éviter les submits intempestifs

    /* Ton traitement ici */

    $submitBtn
        removeAttr('disabled') // On réactive le bouton
        .val(oldValue); // On réinjecte la valeur initiale du bouton

    return false;
});

var $submitBtn = $('[type="submit"]', this) * (car sinon s'il y a plusieurs formulaires, tous seront executés en meme temps... :c)

@PhiSyX C'est un script générique que j'ai fait, à lui de l'adapter selon ses besoin ;)

Salut KIv,

J'ai essayé ton bout de code mais pas de changement ! Merci

En es-tu certains !?
Erreur dans les logs ? que ce passe-t'il réellement ?
Car chez moi les vérifs des champs fonctionnes avec les messages d'erreurs qui s'affichent.
Puis lorsque tout est correcte le bouton change d'état.
Puis à toi de procéder en ajax pour la suite.