OnSubmit du formulaire Validation JavaScript soumet toujours False

  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Nov 18, 2007
  • Messages: 429
  • Status: Offline

Message Novembre 19th, 2012, 4:30 pm

Je vérifie un petit formulaire avec javascript.


JavaScript
Code: [ Select ]

function validateform(form)
{


        if (form.zip_code.value.length != 5) {
         
                 alert("Please check your zip code. It should be 5 digits.");
               form.zip_code.focus();
               form.submitbtn.style.display = "";
               form.loading.style.display='none';
               return false;
                             
        } else if (form.fname.value == "") {
               alert('Please fill in your first name.');
               form.fname.focus();
               form.submitbtn.style.display = "";
               form.loading.style.display='none';
               return false;
        } else if (form.lname.value == "") {
               alert('Please fill in your last name.');
               form.lname.focus();
               form.submitbtn.style.display = "";
               form.loading.style.display='none';
               return false;
       
        } else {
        return true;
        }       
}
  1. function validateform(form)
  2. {
  3.         if (form.zip_code.value.length != 5) {
  4.          
  5.                  alert("Please check your zip code. It should be 5 digits.");
  6.                form.zip_code.focus();
  7.                form.submitbtn.style.display = "";
  8.                form.loading.style.display='none';
  9.                return false;
  10.                              
  11.         } else if (form.fname.value == "") {
  12.                alert('Please fill in your first name.');
  13.                form.fname.focus();
  14.                form.submitbtn.style.display = "";
  15.                form.loading.style.display='none';
  16.                return false;
  17.         } else if (form.lname.value == "") {
  18.                alert('Please fill in your last name.');
  19.                form.lname.focus();
  20.                form.submitbtn.style.display = "";
  21.                form.loading.style.display='none';
  22.                return false;
  23.        
  24.         } else {
  25.         return true;
  26.         }       
  27. }



html :
Code: [ Select ]

<form name="myform1" id="myform1" method="POST" action="process.php" onSubmit="return validateform(this);" >

    <table border="0" width="330" cellspacing="5" id="table2">
        <tr>
        <td align="right" width="148">
        <font color="#000">zip code</font></td>
        <td align="left" width="163"><input name="zip_code" maxlength="5" size="5" type="text" class="texta"/></td>
        </tr>
        <tr>
        <td align="right" width="148">
        <font color="#000">first name</font></td>
        <td align="left" width="163">
        <input name="fname" size="15" type="text" class="texta" /></td>
        </tr>
        <tr>
        <td align="right" width="148">
        <font color="#000">last name</font></td>
        <td align="left" width="163">
        <font color="#000">
        <input name="lname" size="15" type="text" class="texta" /></font></td>
        </tr>
        <tr>
        <td colspan="2">
        <img src="images/loading.gif" alt="" border="0" name = "loading" style = "display:none;">
        </font>
        <input type="image" src="images/form-button.png" BORDER="0" ALT="Submit Form" value="Click to Submit! " name="submitbtn" onclick = "this.style.display='none', loading.style.display=''" />
        </td>
        </tr>
    </table>
</form>
  1. <form name="myform1" id="myform1" method="POST" action="process.php" onSubmit="return validateform(this);" >
  2.     <table border="0" width="330" cellspacing="5" id="table2">
  3.         <tr>
  4.         <td align="right" width="148">
  5.         <font color="#000">zip code</font></td>
  6.         <td align="left" width="163"><input name="zip_code" maxlength="5" size="5" type="text" class="texta"/></td>
  7.         </tr>
  8.         <tr>
  9.         <td align="right" width="148">
  10.         <font color="#000">first name</font></td>
  11.         <td align="left" width="163">
  12.         <input name="fname" size="15" type="text" class="texta" /></td>
  13.         </tr>
  14.         <tr>
  15.         <td align="right" width="148">
  16.         <font color="#000">last name</font></td>
  17.         <td align="left" width="163">
  18.         <font color="#000">
  19.         <input name="lname" size="15" type="text" class="texta" /></font></td>
  20.         </tr>
  21.         <tr>
  22.         <td colspan="2">
  23.         <img src="images/loading.gif" alt="" border="0" name = "loading" style = "display:none;">
  24.         </font>
  25.         <input type="image" src="images/form-button.png" BORDER="0" ALT="Submit Form" value="Click to Submit! " name="submitbtn" onclick = "this.style.display='none', loading.style.display=''" />
  26.         </td>
  27.         </tr>
  28.     </table>
  29. </form>



Les feux de javascript, mais il semble avec la commande alert() lorsque l'utilisateur appuie sur OK qui il finit par envoyer le formulaire. Je suppose que je pourrais écrire une autre fonction pour envoyer manuellement le formulaire ou j'ai effectivement réécrit le code javascript à l'aide de la commande Confirm() en JavaScript et puis en vérifiant si l'utilisateur appuie sur OK ou sur Annuler et puis en définissant les deux pour retourner false. Cela semble arrêter le formulaire de soumission, mais peut être source de confusion pour les utilisateurs. Sans doute plus juste Appuyez sur OK et continuer et en appuyant sur Annuler va faire la même chose j'ai juste pensé que j'ai besoin de comprendre pourquoi utiliser alert() ne fonctionne pas lorsqu'il existe des tonnes de documentation sur la validation d'un formulaire comme ça.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Novembre 19th, 2012, 4:30 pm

  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Nov 18, 2007
  • Messages: 429
  • Status: Offline

Message Novembre 19th, 2012, 4:31 pm

Y a-t-il un moyen de retourner FALSE lorsque l'utilisateur clique sur OK dans le message d'alerte ? Sa ma compréhension que OK sur le alert() est supposée pour renvoyer non défini. Est-ce exact ?
  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Nov 18, 2007
  • Messages: 429
  • Status: Offline

Message Novembre 20th, 2012, 7:51 am

Alors aujourd'hui j'allais juste un par un en commentant des lignes.

J'ai trouvé

Code: [ Select ]
form.submitbtn.style.display = "";


est à l'origine du formulaire à soumettre.

Sur l'image submit bouton onclick, j'ai fixé à afficher aucun afin d'éviter les doubles demandes. Il masque le bouton et affiche le gif de chargement.

Eh bien, si la validation échoue je dois ré-afficher le bouton d'envoi et de cacher le gif de chargement et ce processus est à l'origine le formulaire pour soumettre après avoir heurté une OK sur le qui-vive.

Pensées ?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Novembre 20th, 2012, 1:51 pm

Donc si vous supprimez cette ligne que vous mentionnez ensuite cela fonctionne réellement la bonne façon de ne pas remettre le formulaire ? Très étrange, cela dans tous les principaux navigateurs ?

Je ne pense pas que cela provoque le problème, mais a remarqué que, lorsque votre html loading.gif est, vous avez une clôture balise de police après que lui qui n'a aucun sens. Habituellement je commence toujours par veillant à ce que votre code HTML est correct, juste au cas où il y a quelques bug bizarre aléatoire causé par qui.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Novembre 20th, 2012, 1:59 pm

Une pensée est ici qu'il serait préférable de changer pour un événement onclick retournent toujours false et ensuite au sein de votre JavaScript faire quelque chose comme :

Form.Submit()

lorsqu'il est prêt à fonctionner effectivement à travers. Vous ne savez pas si cela allait changer le comportement.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de l’utilisateur
  • Inscription: Nov 18, 2007
  • Messages: 429
  • Status: Offline

Message Novembre 21st, 2012, 9:33 am

Ouais, Désolé j'ai essayé de nettoyer le code, ou plutôt, tout le texte statique. J'ai supprimé le début mais n'avez pas attraper la balise de fermeture. Ive fixé dans mon site de test qui est au format html minimum nue parce que je suis d'accord repenser le code html est le premier. Cependant, le comportement est le même, et l'espèce ne semble pas l'affecter.

Ive a essayé d'envoyer manuellement le formulaire avec form.submit(), les variations, mais le code n'a pas à obtenir que beaucoup parce que dès que j'ai mis le style.display = ; pour la submitbtn que soumet le formulaire. Je peux afficher/masquer le gif de chargement et ne se soumet pas le formulaire. Donc, c'est peut-être un bug avec à l'aide d'un bouton "soumettre" ou le bouton image/valider et modifier son affichage css.

Ive testé dans IE9 et Chrome. Ils ont tous deux présenter le formulaire avec form.submitbtn.style.display = ;

Le but premier de l'affichage/masquage du bouton submit était d'empêcher plusieurs clics. Donc, je viens de mettre le bouton Soumettre pour masquer lorsque le javascript retourne true (lorsque son supposé présenter). Dans le cas contraire, si le code javascript retourne false, l'utilisateur ne peut pas cliquer sur soumettre à nouveau à cause de la boîte d'alerte. L'utilisateur doit cliquer OK dans la boîte avant de pouvoir frapper soumettre à nouveau. Donc, uniquement si le javascript est vrai dois-je vraiment supprimer le bouton Envoyer quand même. Aussi, si le code javascript est vrai puis le script du processus doivent pas tous les problèmes.

Merci BWM. Ive a obtenu cette solution mise en place et je pense que cela va fonctionner, mais les soumissions multiples sont des personnes dont le PC se bloque lors de la présentation qui est difficile à reproduire. :) Je sais pour sûr si je vois un tas de plusieurs entrées que j'ai ajouté également code de process.php qui aide avec cela aussi, mais je voudrais encore savoir pourquoi style.display envoie un formulaire.

Afficher de l'information

  • Total des messages de ce sujet: 6 messages
  • Utilisateurs parcourant ce forum: Kurthead+1, Zealous et 107 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC