11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Executer une fonction apres verif de formulaire

bonjour à tous,
je suis un newbie en Js donc je fais avec les moyens du bord.
Voila j'ai une vérification de formulaire qui ce fais en Js qui fonctionne bien, par contre comme ce formulaire a un petit upload j'ai intégré après verif du formulaire une modale box le temps
que cela upload.
mon souci c'est que je voudrais que la modale apparaisse uniquement lorsque tous les champs sont bien remplis.
voici mon code :
jQuery(function(){
	jQuery("#envoyer").click(function(){
		valid =true;
		if (jQuery("#nomcontact").val() == "" ){
				jQuery("#nomcontact").next(".error-message").fadeIn().html("<span class='icon-cross2'> </span> <span style='vertical-align:top;'>Veuillez saisir le nom du contact/représentant</span>");
		valid = false;		
		}
		else{
				jQuery("#nomcontact").next(".error-message").fadeOut();
		}
		if (jQuery("#prenomcontact").val() == "" ){
				jQuery("#prenomcontact").next(".error-message").fadeIn().html("<span class='icon-cross2'> </span> <span style='vertical-align:top;'>Veuillez saisir le prénom du contact/représentant</span>");
		valid = false;		
		}
		else{
				jQuery("#prenomcontact").next(".error-message").fadeOut();
		}
                    .... / ....
 
               // la modal box qui doit se lancer que si tous les if sont ok
 
			jQuery('.paulund_modal').paulund_modal_box({
			title:'Création de la fiche membre',
			description:'<br /><img src="tccimg/ajax-loader.gif"><br /><br /><span class="vert"><b>Veuillez patienter...</b></span>'
				}); 
 
	return valid;
	});
});


Si qql'un pouvait me donner un coup de main cela serait bien cool
Cdt

Merci d'avance
Modérateur
Salut,

Erreur basique.... la sémantique.....
C'est le formulaire que l'on soumet, pas un click sur un bouton Smiley cligne . Un formulaire se soumet de différentes manières (au clavier par exemple). 

    $('#superformulaire').on('submit',function(){
        //etc.    
    });


Pour ton problème :


    $('#superformulaire').on('submit',function(e){
        //etc.
        
        if (valid) { //si valid vaut true
            mafonctionDeLaMortQuiTue(); //execution de la function mafonctionDeLaMortQuiTue()
            e.preventDefault(); //bloc comportement navigateur
        }
    });

Modifié par niuxe (03 Oct 2014 - 14:13)
j'ai essayer d'adapter ton code avec le mien mais la plus rien ne fonctionne ....
la vérification ne se fait plus etc...
Modérateur

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .msgErreur{color: #F00;}
    .inputErreur{border: 1px solid #F00;}
  </style>
</head>
<body>
  <form id="ContactForm" action="#" method="post">
    <fieldset>
      <legend>contact</legend>
      <div class="input text"><label for="ContactNom">nom</label><input type="text" id="ContactNom" name="data[ Contact ][ nom ]"></div>
      <div class="input text"><label for="ContactEmail">Email</label><input type="text" id="ContactEmail" name="data[ Contact ][ email ]"></div>
      <div class="input submit"><input type="submit" name="data[ Contact ][ envoyer ]" value="poster"></div>
    </fieldset>
  </form>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script>
    $(function(){
      $('#ContactForm').on('submit',function(e){
        var elForm = $(this),
          compteur = 0,
          listChampsErreur = [ ],
          msgErreurDefaut = "Champ obligatoire";
        
          
        $('.msgErreur',elForm).remove();
        $('.inputErreur',elForm).removeClass('inputErreur');
        
        $('.input.text input',elForm).each(function(i){
          var elChamp = $(this),
            idChamp = elChamp.attr('id');
          if ($.trim(elChamp.val()) == "") {
            compteur += 1; 
            listChampsErreur.push({
              champ : idChamp,
              msgEror : msgErreurDefaut
            });
          }
          if (idChamp.indexOf('mail') != -1 && $.trim(elChamp.val()) !== "" && !/^[ a-z0-9._\- ]+@[ a-z0-9._\- ]{2,}\.[ a-z ]{2,4}$/i.test($.trim(elChamp.val()))) {
            compteur += 1; 
            listChampsErreur.push({
              champ : idChamp,
              msgEror : 'mauvais format email'
            });
          }
          
        });
        if (compteur > 0) {
          for (var index = 0 ; index < listChampsErreur.length ; index++) {
            var elChamp = $('#'+listChampsErreur[ index ].champ),
              msgErreur = listChampsErreur[ index ].msgEror;
            if (elChamp.next().length == 0) {
              elChamp.addClass('inputErreur').after('<span class="msgErreur">'+msgErreur+'</span>');
            }
            
          }
          e.preventDefault();
        }
        
        if (compteur === 0) {
          alert("je fais ce que je veux. Le formulaire est rempli correctement. ");
          e.preventDefault();
        }
        
      });
    });
  </script>
</body>
</html>


À noter que je me répète un peu. Pour éviter cela, il faudrait factoriser un peu. Pour un ou deux petits formulaires dans un site, ça suffit amplement. Par contre, pour un ou plusieurs plus formulaire avec des règles spécifiques (inscription assurance par exemple), il faudra un peu repenser. Mais l'idée d'exécution sera sensiblement la même à peu de choses près . Tout dépend un peu de la fin mise à part le callback(ton layer). Tu remarqueras que j'utilise un compteur au lieu d'un booléen. L'avantage, je peux connaître le nombre de champs interceptés. C'est utile pour le débogage Smiley cligne
Modifié par niuxe (03 Oct 2014 - 21:52)
Merci pour ce formulaire, je vais regarder cela de plus prés afin de
comprendre comment cela fonctionne.

Cdt
Sujet clos
Aller à