Bonsoir, donc voila, je cherche un moyen de fermer une ZoomBox(qui contient un formulaire) lors de la soumission de celui-ci.

Le problème c'est qu'en JS je vérifie la validité du formulaire

// On ajoute une bordure aux champs non valide :
function surligne(champ, erreur)
{
   if(erreur)
      champ.style.border = "2px solid #ec0202";
   else
      champ.style.border = "";
}
// Vérification du Pseudo
function verifPseudo(champ)
{
   if(champ.value.length < 2 || champ.value.length > 25)
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}
//Vérifiaction de l'Email
function verifMail(champ)
{
   var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
   if(!regex.test(champ.value))
   {
      surligne(champ, true);
      return false;
   }
   else
   {
      surligne(champ, false);
      return true;
   }
}
//On Vérifie le tous
function verifForm(f)
{
   var pseudoOk = verifPseudo(f.pseudo);
   var mailOk = verifMail(f.email); 

   if(pseudoOk && mailOk) 
      return true;
   else
   {
      alert("Veuillez remplir correctement tous les champs");
      return false;
   }
}

<html>
<head>
    <meta charset="utf-8">
        <link rel="stylesheet" href="../styles/style-site.css" type="text/css"/>
        <link href="../js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen"/>
        <script type="text/javascript" src="../js/jquery.js"></script>
        <script type="text/javascript" src="../js/zoombox/zoombox.js"></script>
        <script type="text/javascript" src="../js/verif_register.js"></script>

    <title>WiPp</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<section id="cnx">
                <div id="register" class="register">
                    <form name="registerform" id="register" method="post" class="zoombox" onsubmit="return verifForm(this)">
                        <div class="id">
                            <div class="label">Identifiant</div>
                                <input type="text" name="pseudo" class="pseudo" id="pseudo" size="20" tabindex="20" onblur="verifPseudo(this)">
                            <div class="error">Identifiant non valide</div>
                        </div>
                        <div class="id">
                             <div class="label">Mot de passe</div>
                                <input type="password" class="pwd" id="pwd" size="20" tabindex="20">
                            <div class="error"></div>
                        </div>
                        <div class="id">
                            <div class="label">Confirmation mot de passe</div>
                                <input type="password" class="confirm-pwd" id="confirm-pwd" size="20" tabindex="20">
                            <div class="error"></div>
                        </div>
                        <div class="id">
                            <div class="label">Adresse électronique</div>
                                <input type="email" class="email" id="email" size="20" tabindex="20" onblur="verifMail(this)"> 
                            <div class="error"></div>
                        </div>
                        <div class="id">
                             <div class="label">Confirmation adresse électronique</div>
                                <input type="email" class="confirm-email" id="confirm-email" size="20" tabindex="20" onblur="verifMail(this)">
                            <div class="error"></div>
                        </div>
                        <div class="submit">
                            <input type="submit" name="wp-submit" id="btn-register" class="zoombox" value="S'inscrire" tabindex="100" />
                        </div>
                    </form>
                </div>
</section>

Donc moi je voudrai que si le formulaire est valide la ZoomBox se ferme, mais pas si il est invalide.
J'ai testé pas mal de chose, mais rien ne marche.

Avez-vous une idée ?

Cordialement

2 réponses


Dans ta fonction veriForm, il faudrait ajouter cette méthode $.zoombox.close()

C'est ce qui ma parut le plus logique, mais cela ne fonctionne pas...