[Résolu] Désactiver le submit sur form sur Entrée

Bonjour,

J'ai un gros soucis et je n'arrive pas à trouver de solutions.

En fait voilà à koi ressemble ma zone de saisie :



Mon problème provient du fait que lorsque je rentre une date ayant un format invalide et que j'appuie sur la touche entrée le controle js m'indique bien que la date n'a pas le bon format mais il soumet quand meme le formulaire alors que le code du controleur est le suivant :

function Search() {
sDate = document.forms["fSearch"].elements["date"].value;
ret = DateValideSep(sDate,'/');
if ( ret != ''){
	document.forms["fSearch"].submit();
} else {
	return;
}
}

Et lorsque que je clic sur le lien [Rechercher] qui appele le controleur :

<a href="Javascript:Search()">[Rechercher]</a>

J'ai le message d'alerte qui m'indique que le format n'ai pas le bon mais et comme je le souhaite le formulaire n'est pas soumis.

Je n'arrive pas à comprendre le comportement du keyPress sur la touche entrée et par conséquent le modifier en conséquence pour qu'il fasse la même chose que le clic.

Merci de votre aide.
Modifié par albator_38 (12 Oct 2006 - 16:08)

Bon je suis désolé pour le message en double.

Je pense avoir trouvé, ce n'est pas forcément le plus élégant mais pour le moment c'est tout ce que j'ai donc si quelqu'un voit un meilleur moyen je suis preneur.

J'ai tout d'abord ajouter dans la balise de mon formulaire :

onSubmit="return(false);"

de manière à désactiver le submit lorsque l'on frappe sur la touche entrée ou enter.

J'ai ensuite mis dans la balise d'input de la date :

onKeyPress="verifKeyPress(event)"

et la fonction verifKeyPress récupère la touche sur laquelle j'ai cliquée. Si cette touche correspond à la touche entrée ou enter (keyCode = 13) alors je soumet le formulaire.

Voilà pour ce qui est de ma solution.

Voici un exemple de validation, récupéré dans l'article :

<script type="text/javascript">
<![CDATA[

function valider(frm){
  if(frm.elements['prenom'].value != "") {
    return true;
  }
  else {
    alert("Saisissez le prénom");
    return false;
  }
}

]]>
</script>

<form onsubmit="return valider(this)" id="frmSaisie" …>
…
</form>

Une dernière chose...

En utilisant la bonne technique de validation, via l'événement onsubmit, tu n'auras plus besoin de contrôler la touche ENTER. Dès que le formulaire sera soumi, que ce soit via la touche ENTER ou via le clique du bouton Submit, ta fonction de validation sera appelée.

Bonjour,

albator_38 a écrit :

Donc si j'utilise le submit="return validateDate()" dans le form, lorsque je clique sur le lien il m'envoie sur une page blanche avec true or false d'écrit en fonction du résultat renvoyé par la fonction validateDate() au lieu de me renvoyer vers la page décrite dans la propriété action du form.

L'idée est de retirer complètement ton lien pour soumettre le formulaire, et le remplacer intégralement par un bouton submit classique qui sera inséré dans le formulaire :

<input type="submit" value="Rechercher" ... />

Le seul endroit où la fonction de validation est appelée, c'est dans la balise form via l'événement onsubmit.

Utiliser un lien hypertexte pour lancer une action comme la recherche est, à mon humble avis, une mauvaise idée. Cela pourrait porter à confusion. L'utilisateur pourrait se demander si ce lien va ouvrir une page contenant le module de recherche. Idéalement, il vaut mieux préconiser l'utilisation du bouton submit. Il est facilement identifiable et surtout, conçu pour soumettre le formulaire, contrairement au lien qui n'a pas été conçu pour ca.

Si c'est l'aspect graphique du bouton submit qui te rebute, tu peux le styler via CSS, même s'il vaut mieux lui laisser son apparence naturelle pour que l'utilisateur le reconnaisse plus facilement. Tu peux également remplacer le bouton submit par un input type image, qui permet d'utiliser une image pour soumettre le formulaire. Dans ce dernier cas, il y a certains détails techniques à connaître. Si cela t'intéresse il me ferait plaisir de t'en parler.

Si tu conserve ton lien, je t'invite plutôt à l'écrire de cette façon :

<a href="#" onclick="tafonction();">Ton action</a>

Je t'invite également à lire l'excellent article sur Comment bien coder en Javascript. On y apprend, entre autre, comment générer ce type de lien via Javascript.

Bonne continuation
Modifié par Tony Monast (12 Oct 2006 - 15:03)

Merci pour tes réponses et le temps que tu as passé pour m'expliquer tout cela.

Comme je dois conserver le lien qui soumet le formulaire, je vais utiliser la méthode :

a écrit :

<a href="#" onclick="tafonction();">Ton action</a>

Ce n'est pas parce que je veux pas utiliser les boutons mais plutôt que je fais évoluer l'application exitente et que cela (les liens ayant le comportement des boutons) doit rester identique d'une version à l'autre.

Merci encore