Il y a quelque temps, j'avais besoin de quelque chose de très similaire ... et je l'ai eu.
Donc, ce que je mets ici, c'est comment je fais les astuces pour avoir un formulaire pouvant être soumis par JavaScript sans aucune validation et exécuter la validation uniquement lorsque l'utilisateur appuie sur un bouton (généralement un bouton d'envoi).
Pour l'exemple, j'utiliserai un formulaire minimal, uniquement avec deux champs et un bouton de soumission.
Rappelez-vous ce qui est recherché: à 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 effectuée et le formulaire envoyé uniquement s'il réussit la validation.
Normalement, tout commencerait à partir de quelque chose près de cela (j'ai supprimé tous les trucs supplémentaires sans importance):
<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, qu'il onclick
retourne true
ou false
.
Si je change type="submit"
pour type="button"
, cela semble fonctionner mais ne fonctionne pas. Il n'envoie jamais le formulaire, mais cela peut se faire facilement.
J'ai finalement 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 de soumission JavaScript, quelque chose de similaire à ceci:
function Validator(){
// ...bla bla bla... the checks
if( ){
document.getElementById('theFormID').submit();
return(true);
}else{
return(false);
}
}
C'est id=""
juste pour JavaScript getElementById
, name=""
c'est juste pour qu'il apparaisse sur les données POST.
De cette façon, cela fonctionne comme j'ai besoin.
Je mets cela uniquement pour les personnes qui n'ont besoin d'aucune onsubmit
fonction sur le formulaire, mais je fais une validation lorsqu'un utilisateur appuie sur un bouton.
Pourquoi je n'ai besoin d'aucune soumission sur la balise de formulaire? Facile, sur d'autres parties JavaScript, je dois effectuer une soumission mais je ne veux pas qu'il y ait de validation.
La raison: si l'utilisateur est celui qui effectue la soumission, je veux et que la validation soit effectuée, mais s'il s'agit de JavaScript, je dois parfois effectuer la soumission alors que de telles validations l'éviteraient.
Cela peut sembler étrange, mais pas en pensant par exemple: à une connexion ... avec quelques restrictions ... comme ne pas autoriser les sessions PHP et les cookies ne sont pas autorisés!
Donc, tout lien doit être converti en un tel formulaire, afin que les données de connexion ne soient pas perdues. Lorsqu'aucune connexion n'est encore effectuée, cela doit également fonctionner. Aucune validation ne doit donc être effectuée sur les liens. Mais je veux présenter un message à l'utilisateur si l'utilisateur n'a pas entré les deux champs, user et pass. Donc, s'il en manque un, le formulaire ne doit pas être envoyé! il y a le problème.
Voir le problème: le formulaire ne doit pas être envoyé lorsqu'un champ est vide uniquement si l'utilisateur a appuyé sur un bouton, s'il s'agit d'un code JavaScript, il doit pouvoir être envoyé.
Si je fais le travail sur onsubmit
la balise de formulaire, j'aurais besoin de savoir s'il s'agit de l'utilisateur ou d'un autre JavaScript. Puisqu'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 effectuée ou non. La première chose sur 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 n'est donc pas d'avoir onsubmit sur la balise form. Insead le mettre là où il est vraiment nécessaire, sur le bouton.
Pour l'autre côté, pourquoi mettre du code onsubmit puisque conceptuellement je ne veux pas de validation onsubmit. Je veux vraiment la validation des boutons.
Non seulement le code est plus clair, il est là où il doit être. N'oubliez pas ceci: - Je ne veux pas que JavaScript valide le formulaire (cela doit toujours être fait par PHP côté serveur) - Je veux montrer à l'utilisateur un message disant que tous les champs ne doivent pas être vides, qui ont besoin de JavaScript (client côté)
Alors pourquoi certaines personnes (pensez ou dites-moi) cela doit être fait sur une validation onsumbit? Non, conceptuellement, je ne fais pas de validation onsumbit côté client. Je fais juste quelque chose sur un bouton pressé, alors pourquoi ne pas simplement laisser cela être mis en œuvre?
Eh bien, ce code et ce style font parfaitement l'affaire. Sur tout JavaScript dont j'ai besoin pour envoyer le formulaire que je viens de mettre:
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there
Et cela saute la validation lorsque je n'en ai pas besoin. Il envoie simplement le formulaire et charge une page différente, etc.
Mais si l'utilisateur clique sur le bouton Soumettre (alias type="button"
non type="submit"
), la validation est effectuée avant de laisser le formulaire soumis et s'il n'est pas valide, il n'est pas envoyé.
J'espère que cela aide les autres à ne pas essayer de code long et compliqué. Ne l'utilisez pas onsubmit
si vous n'en avez pas besoin et utilisez-le onclick
. Mais n'oubliez pas de passer type="submit"
à type="button"
et s'il vous plaît n'oubliez pas de le faire submit()
par JavaScript.