Il y a quelque temps, j'ai eu besoin de quelque chose de très similaire... et je l'ai eu.
Donc, ce que j'ai mis ici est comment je fais les trucs pour avoir un formulaire capable d'être soumis par JavaScript sans aucune validation et exécuter la validation seulement quand l'utilisateur appuie sur un bouton (typiquement un bouton d'envoi).
Pour l'exemple, je vais utiliser un formulaire minimal, avec seulement deux champs et un bouton d'envoi.
Rappelez-vous ce que l'on veut : A partir de JavaScript, il doit pouvoir être soumis sans aucune vérification. Cependant, si l'utilisateur appuie sur un tel bouton, la validation doit être faite et le formulaire envoyé seulement s'il passe la validation.
Normalement, tout devrait commencer à peu près comme ceci (j'ai enlevé tous les éléments supplémentaires qui ne sont pas importants) :
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>
Voyez comment la balise de formulaire n'a pas onsubmit="..." (rappelez-vous que c'était une condition pour ne pas l'avoir).
Le problème est que le formulaire est toujours soumis, peu importe si onclick renvoie à true ou false .
Si je change type="submit" pour type="button" Il semble que cela fonctionne, mais ce n'est pas le cas. Il n'envoie jamais le formulaire, mais cela peut être fait facilement.
Alors finalement, j'ai utilisé ceci :
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>
Et sur function Validator où return True; est, j'ajoute également une phrase JavaScript submit, quelque chose de similaire à ceci :
function Validator(){
// ...bla bla bla... the checks
if( ){
document.getElementById('theFormID').submit();
return(true);
}else{
return(false);
}
}
Le site id="" est juste pour JavaScript getElementById le name="" c'est juste pour qu'il apparaisse sur les données POST.
De cette manière, cela fonctionne comme je le souhaite.
Je mets ça juste pour les gens qui n'ont pas besoin onsubmit sur le formulaire, mais faites une validation quand un bouton est pressé par l'utilisateur.
Pourquoi n'ai-je pas besoin de onsubmit sur le tag du formulaire ? Facile, sur d'autres parties JavaScript je dois effectuer un submit mais je ne veux pas qu'il y ait de validation.
La raison : si l'utilisateur est celui qui effectue l'envoi, je veux et j'ai besoin que la validation soit effectuée, mais si c'est JavaScript, je dois parfois effectuer l'envoi alors que ces validations l'éviteraient.
Cela peut sembler étrange, mais pas quand on pense par exemple : sur un Login ... avec quelques restrictions ... comme ne pas autoriser l'utilisation de sessions PHP et aucun cookie n'est autorisé !
Tout lien doit donc être converti en un tel formulaire de soumission, afin que les données de connexion ne soient pas perdues. Lorsqu'aucune connexion n'est encore effectuée, le lien doit également fonctionner. Aucune validation ne doit donc être effectuée sur les liens. Mais je veux présenter un message à l'utilisateur si celui-ci n'a pas saisi les deux champs, utilisateur et pass. Donc si l'un d'eux est manquant, le formulaire ne doit pas être envoyé ! voilà le problème.
Voir le problème : le formulaire ne doit pas être envoyé quand un champ est vide seulement si l'utilisateur a appuyé sur un bouton, si c'est un code JavaScript il doit pouvoir être envoyé.
Si je fais le travail sur onsubmit sur la balise du formulaire, j'aurais besoin de savoir si c'est l'utilisateur ou un autre JavaScript. Comme aucun paramètre ne peut être passé, ce n'est pas possible directement, donc certaines personnes ajoutent une variable pour dire si la validation doit être faite ou non. La première chose à faire dans la fonction de validation est de vérifier la valeur de cette variable, etc... Trop compliqué et le code ne dit pas ce que l'on veut vraiment.
La solution est donc de ne pas avoir de onsubmit sur la balise du formulaire. En revanche, il faut le placer là où il est vraiment nécessaire, sur le bouton.
De l'autre côté, pourquoi mettre le code onsubmit puisque conceptuellement je ne veux pas de validation onsubmit. Je veux vraiment une validation par bouton.
Non seulement le code est plus clair, mais il est là où il doit être. Rappelez-vous ceci : - Je ne veux pas que JavaScript valide le formulaire (cela doit toujours être fait par PHP du côté du serveur). - Je veux montrer à l'utilisateur un message indiquant que tous les champs ne doivent pas être vides, ce qui nécessite JavaScript (côté client).
Alors pourquoi certaines personnes (pensent ou me disent) que cela doit être fait sur une validation onsumbit ? Non, conceptuellement, je ne fais pas de validation onsumbit du côté client. Je fais juste quelque chose quand un bouton est pressé, alors pourquoi ne pas simplement laisser cela être implémenté ?
Eh bien, ce code et ce style font parfaitement l'affaire. Sur tous les JavaScript dont j'ai besoin pour envoyer le formulaire, je mets simplement :
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there
Et qui saute la validation quand je n'en ai pas besoin. Il envoie simplement le formulaire et charge une autre page, etc.
Mais si l'utilisateur clique sur le bouton d'envoi (alias type="button" pas type="submit" ) la validation est faite avant de laisser le formulaire être soumis et si non valide non envoyé.
J'espère que cela aidera d'autres personnes à ne pas essayer un code long et compliqué. Il suffit de ne pas utiliser onsubmit si ce n'est pas nécessaire, et utiliser onclick . Mais n'oubliez pas de changer type="submit" à type="button" et n'oubliez pas de faire le submit() par JavaScript.
0 votes
Quelle réponse recommandez-vous, s'il vous plaît ?