web-dev-qa-db-fra.com

onsoumettre plusieurs fonctions javascript

Est-ce que quelqu'un sait comment soumettre plusieurs fonctions? Ce que j’avais l’intention de faire était: onsubmit vérifie si toutes ces fonctions retournent true, si toutes les renvoient true, alors je fais l’action = "vérifié.html"

<form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return validateName() || validatePhone() || validateAddress() ||
validateEmail()">

Cependant, ce qui s'est réellement passé est que l'ordinateur vérifie le code de gauche à droite et le résultat de la fonction suivante remplacera la précédente, et ainsi de suite jusqu'à la fin. Donc, même si toutes les 3 premières fonctions retournent false, tant que la dernière est vraie, l'ordinateur exécutera action = "vérifié.html", ce que je n'avais pas l'intention de faire. ça fait 4 heures que j'essaye de le réparer: S Merci!

De plus, quand j'ai essayé de faire quelque chose comme <form onsubmit="return verify1() && verify2()">, cela ne fonctionne pas, tout ce que cela fait est de vérifier verify1 (), et non les suivants ... :(

CLARIFCATION: lors de l'envoi, je souhaite que quatre fonctions de validation soient appelées. Submit doit être empêché à moins que les quatre fonctions ne renvoient la valeur true, mais elles doivent toujours être appelées même si certaines renvoient false.

javascriptformsfunctiononsubmit
8
Maria

Utilisez & au lieu de &&.

&& utilise l'évaluation de court-circuit et n'évalue donc pas l'opérande de droite si l'opérande de gauche est faux.

& évalue toujours les deux opérandes.

onsubmit="return !!(validateName() & validatePhone()
                      & validateAddress() & validateEmail());"

EDIT: Désolé, j'ai oublié que & ne retournera pas un booléen réel. Entourez l'expression entre parenthèses et utilisez un double ! pour la convertir comme suit (maintenant). (Vous n'aurez pas à vous inquiéter si vous utilisez le résultat dans un test if, mais la valeur renvoyée par le gestionnaire d'événements doit être un booléen réel.)

P.S .: Voici une démo assez maladroite pour montrer que les quatre fonctions sont appelées mais produisent le résultat général vrai ou faux dont vous avez besoin: http://jsfiddle.net/nnnnnn/svM4h/1/

20
nnnnnn

Changez votre code pour utiliser AND au lieu de OR

onsubmit = "return validateName () && validatePhone () && validateAddress () && validateEmail ()"

La raison en est que si vous utilisez OR une fois que la première fonction retourne, javascript n'est pas pris en compte, cela ne vous donnera pas la peine de vérifier les autres fonctions. De plus, vous ne souhaitez pas utiliser OR, car si la première vérification est fausse et que la deuxième est vraie, le formulaire sera toujours soumis car au moins une de vos vérifications est VRAIE.

Voir fiddle pour montrer que cela fonctionne, les deux contrôles sont exécutés et affichent un message d’alerte, mais parce que check2 renvoie false, le formulaire n’est pas soumis - si vous souhaitez jouer avec les résultats des résultats de check1 et de check2 et l’utilisation de && et ||

Après avoir mieux compris le problème, vous devez utiliser un seul &, mais parce que true & true renvoie 1 et non true, vous devez l'écrire comme ceci.

onsubmit = "return ((validateName () & validatePhone () & validateAddress () & validateEmail ()) == 1)"

7
Chris Moutray

si tout ce dont vous avez besoin est de vous assurer que toutes les fonctions retournent la valeur true avant de continuer, utilisez && et non pas || et assurez-vous que l'expression n'est pas évaluée avant la maturité par la fonction de retour, mettez des crochets supplémentaires

<form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return (validateName() && validatePhone() && validateAddress() &&
validateEmail() )">
3
Ahmad

Créez une fonction wrapper qui appelle chaque fonction et vérifie sa valeur de retour. À tout moment, si la valeur renvoyée est false, vous pouvez arrêter le formulaire à envoyer en renvoyant false à ce moment-là ou évaluer le reste des éléments et enfin renvoyer false.

Donc, un code JS qui fera ce que vous voulez est: 

function validateForm() {
    var isFormValid = true;
    isFormValid &= validateName();
    isFormValid &= validatePhone();
    isFormValid &= validateAddress();
    isFormValid &= validateEmail();
    return isFormValid? true:false;
}

Maintenant, dans le formulaire, utilisez simplement:

<form id="myForm" name="myForm" action="checked.html" method="post" onsubmit="return validateForm();">

Voici un exemple JSFiddle qui fonctionne.

EDIT: Fait un boo boo ci-dessous, corrigé.

L'utilisation de OR était incorrecte, mais la raison pour laquelle AND ne fonctionne pas comme prévu est à cause de Short-circuit_evaluation .

  • OU: l'évaluation s'arrête sur le premier opérande, ce qui est vrai et le résultat est renvoyé
  • AND: l'évaluation s'arrête sur le premier opérande, ce qui est false et false est renvoyé

    • 1
    Akshet

    onsubmit = "return validateName () && validatePhone () && validateAddress () && validateEmail ()"

    utiliser ce code

    0
    Akram Ali

    Pour valider mon formulaire, j'ai simplement créé une fonction appelée validateForm () {} puis, à l'intérieur de cette fonction, j'ai mis tout le code nécessaire à la validation complète. Puis utilisé onsubmit = "validateForm ()". Il vérifie dans l'ordre et ne soumet que si toutes les conditions sont vraies.

    0
    Conor

    Après la vérification de la méthode, la première fonction validateName () sera exécutée et la fonction suivante sera vérifiée si seule la première fonction est vraie. De même, la troisième fonction doit renvoyer la valeur true de la première et de la deuxième fonction. Alors imaginez si toutes les fonctions ne sont pas valides et même si vous avez un message d'erreur différent, vous ne verrez que le message d'erreur de la première fonction. Une fois que la fonction validateName () est passée, vous pouvez voir le message d'erreur de validatePhone () ect. 

    <form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit="return (validateName() && validatePhone() && validateAddress() &&
validateEmail() )">

    Vous ne pouvez pas utiliser ce qui précède si vous souhaitez afficher les messages d'erreur en fonction de toutes les validations du premier envoi. Vous pouvez également utiliser la méthode suivante si vous souhaitez activer toutes les fonctions (ou afficher toutes les erreurs de validation) lors de l'envoi.

    <form id="myForm" name="myForm" action="checked.html" method="post"
onsubmit=" if( ( validateName() && validatePhone() && validateAddress() &&
validateEmail() ) == false) { return false; } ">
    0
    Prasad Gayan