Formulaire avec JQuery
Guiiil
-
5 févr. 2009 à 11:20
Guiiil -
Guiiil -
Bonjour,
Je tente pour un stage de créer un formulaire d'envoi de mail. Mon but est d'empêcher l'utilisateur d'appuyer sur le bouton tant que les informations ne sont pas valide. Le problème est que si j'applique une boucle, le programme ne veut pas se lancer... Voici mon programme
<html>
<head>
<script type="text/javascript" src="jquery.core.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var boutonnom = "1"; // pour désactiver le bouton tant que toutes les informations ne sont pas correctes
var boutonmail = "1";
var boutontextarea = "1";
$("#inscription").attr("disabled", true);
do
{
// On affecte le textarea
$("#monForm textarea").focus(function(){
$(this).next(".info").empty(); // suppression de la mention obligatoire
});
//
$("#monForm textarea").blur(function(){
var valeurInput = $(this).attr("value");
if(valeurInput == '')
{
$(this).next(".info").append("Obligatoire");
}
else
{
boutontextarea = "0";
}
});
// on affecte tout les input type="text"
$("#monForm input[type=text]").focus(function(){
$(this).next(".info").empty(); // suppression de la mention obligatoire
});
$("#nom").blur(function(){
var valeurInput = $(this).attr("value"); // on récupère la valeur de l'input selectionné
var spanInfoSuivant = $(this).next(".info"); // on sélectionne le span info
if(valeurInput == '') // si la valeur est vide
{
spanInfoSuivant.append("Obligatoire"); // affichage de la mention obligatoire
}
else if(valeurInput.length < 2)
{
spanInfoSuivant.append("Trop court");
}
else
{
boutonnom = "0";
}
});
function verif(email) // fonction qui vérifie la validité d'un mail
{
var reg = /^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/i;
var resultat = reg.test(email);
//alert(resultat);
//return (reg.exec(email)!=null);
return resultat;
}
$("#mail").blur(function(){
var valeurInput = $(this).attr("value"); // on récupere la valeur de l'input selectionné
var spanInfoSuivant = $(this).next(".info"); // on selectionne le span info correspondant
var email = verif(valeurInput);
if(email == false) //
{
spanInfoSuivant.append("Veuillez rentrer une adresse valide"); // affichage de la mention obligatoire
$("#infomail").css({ color: "red"});
}
else
{
spanInfoSuivant.append("O");
$("#infomail").css({ color: "green"});
boutonmail = "0";
}
});
//(boutonmail != "1")&&(boutonnom != "1")&&(boutontextarea != "1")
boutonmail = "0";
}while (boutonmail == "1");
$("#inscription").removeAttr("disabled");
});
</script>
</head>
<body>
<div class="encadre">
<form action="page.php" method="post" id="monForm">
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" /><span class="info"></span><br />
<label for="mail"> Mail : </label><input type="text" name="mail" id="mail" /><span class="info"></span><br />
<label for="message"> Message : </label><textarea name="message" id="message"></textarea><span class="info"></span><br />
<label> </label><input type="submit" name="inscription" id = "inscription" /></span class="info"></span>
</form>
</div>
</body>
</html>
Si vous avez une quelconque idée, je suis preneur... en vous remerciant ^_^.
Je tente pour un stage de créer un formulaire d'envoi de mail. Mon but est d'empêcher l'utilisateur d'appuyer sur le bouton tant que les informations ne sont pas valide. Le problème est que si j'applique une boucle, le programme ne veut pas se lancer... Voici mon programme
<html>
<head>
<script type="text/javascript" src="jquery.core.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var boutonnom = "1"; // pour désactiver le bouton tant que toutes les informations ne sont pas correctes
var boutonmail = "1";
var boutontextarea = "1";
$("#inscription").attr("disabled", true);
do
{
// On affecte le textarea
$("#monForm textarea").focus(function(){
$(this).next(".info").empty(); // suppression de la mention obligatoire
});
//
$("#monForm textarea").blur(function(){
var valeurInput = $(this).attr("value");
if(valeurInput == '')
{
$(this).next(".info").append("Obligatoire");
}
else
{
boutontextarea = "0";
}
});
// on affecte tout les input type="text"
$("#monForm input[type=text]").focus(function(){
$(this).next(".info").empty(); // suppression de la mention obligatoire
});
$("#nom").blur(function(){
var valeurInput = $(this).attr("value"); // on récupère la valeur de l'input selectionné
var spanInfoSuivant = $(this).next(".info"); // on sélectionne le span info
if(valeurInput == '') // si la valeur est vide
{
spanInfoSuivant.append("Obligatoire"); // affichage de la mention obligatoire
}
else if(valeurInput.length < 2)
{
spanInfoSuivant.append("Trop court");
}
else
{
boutonnom = "0";
}
});
function verif(email) // fonction qui vérifie la validité d'un mail
{
var reg = /^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/i;
var resultat = reg.test(email);
//alert(resultat);
//return (reg.exec(email)!=null);
return resultat;
}
$("#mail").blur(function(){
var valeurInput = $(this).attr("value"); // on récupere la valeur de l'input selectionné
var spanInfoSuivant = $(this).next(".info"); // on selectionne le span info correspondant
var email = verif(valeurInput);
if(email == false) //
{
spanInfoSuivant.append("Veuillez rentrer une adresse valide"); // affichage de la mention obligatoire
$("#infomail").css({ color: "red"});
}
else
{
spanInfoSuivant.append("O");
$("#infomail").css({ color: "green"});
boutonmail = "0";
}
});
//(boutonmail != "1")&&(boutonnom != "1")&&(boutontextarea != "1")
boutonmail = "0";
}while (boutonmail == "1");
$("#inscription").removeAttr("disabled");
});
</script>
</head>
<body>
<div class="encadre">
<form action="page.php" method="post" id="monForm">
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" /><span class="info"></span><br />
<label for="mail"> Mail : </label><input type="text" name="mail" id="mail" /><span class="info"></span><br />
<label for="message"> Message : </label><textarea name="message" id="message"></textarea><span class="info"></span><br />
<label> </label><input type="submit" name="inscription" id = "inscription" /></span class="info"></span>
</form>
</div>
</body>
</html>
Si vous avez une quelconque idée, je suis preneur... en vous remerciant ^_^.
A voir également:
- Formulaire avec JQuery
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Confirmer le nouvel envoi du formulaire err_cache_miss - Forum Webmastering
- Problème avec Google Chrome - Forum Google Chrome
