web-dev-qa-db-fra.com

Avec validation du formulaire: pourquoi onsubmit = "return functionname ()" au lieu de onsubmit = "functionname ()"?

La question est assez explicite. Je ne comprends pas ce que le retour fait dans le code suivant:

<form onsubmit="return somefunction()">
42
zjmiller

Vous avez besoin du retour pour que true/false soit transmis à l'événement submit du formulaire (qui le recherche et empêche la soumission s'il reçoit la valeur false).

Regardons quelques JS standard:

function testReturn() { return false; }

Si vous appelez simplement cela dans n'importe quel autre code (qu'il s'agisse d'un gestionnaire onclick ou de JS ailleurs), la réponse sera fausse, mais vous devez faire quelque chose avec cette valeur.

...
testReturn()
...

Dans cet exemple, la valeur de retour revient, mais rien ne se passe. En gros, vous dites exécuter cette fonction et je me moque de ce qu’elle revient. En revanche si vous faites ceci:

...
var wasSuccessful = testReturn();
...

alors vous avez fait quelque chose avec la valeur de retour.

La même chose s'applique aux gestionnaires onclick. Si vous appelez simplement la fonction sans le retour dans onsubmit, vous dites alors "exécutez ceci, mais n'empêchez pas l'événement s'il renvoie false." C'est une façon de dire d'exécuter ce code lorsque le formulaire est soumis, mais ne le laissez pas arrêter l'événement.

Une fois que vous ajoutez le retour, vous dites que ce que vous appelez doit déterminer si l'événement (soumettre) doit continuer.

Cette logique s’applique à de nombreux événements onXXXX en HTML (onclick, onsubmit, onfocus, etc.).

52
Parrots

Une extension à ce que dit GenericTypeTea - Voici un exemple concret:

<form onsubmit="return false">

Le formulaire ci-dessus ne sera pas soumis , alors que ...

<form onsubmit="false">

... ne fait rien, c’est-à-dire que le formulaire sera envoyé

Sans return, onsubmit ne reçoit pas de valeur et l'événement est exécuté de la même manière que tout autre gestionnaire.

13
Amir Raminfar

Renvoyer false de la fonction arrêtera la poursuite de l'événement. C'est à dire. cela arrêtera la soumission du formulaire.

c'est à dire.

function someFunction()
{
    if (allow) // For example, checking that a field isn't empty
    {
       return true; // Allow the form to submit
    }
    else
    {
       return false; // Stop the form submitting
    }
}
11
djdd87

Lorsque onsubmit (ou tout autre événement) est fourni en tant qu'attribut HTML , la valeur de chaîne de l'attribut (par exemple, "return validate ();") est injectée en tant que corps de la valeur réelle on fonction handler lorsque l'objet DOM est créé pour l'élément. 

Voici une brève preuve dans la console du navigateur:

var p = document.createElement('p');
p.innerHTML = '<form onsubmit="return validate; // my statement"></form>';
var form = p.childNodes[0];

console.log(typeof form.onsubmit);
// => function

console.log(form.onsubmit.toString());
// => function onsubmit(event) {
//      return validate(); // my statement
//    }

Donc, dans le cas où le mot-clé return est fourni dans l'instruction injectée; Lorsque le gestionnaire d'envoi est déclenché, la valeur renvoyée par l'appel de la fonction de validation est passée en tant que valeur de retour du gestionnaire d'envoi et prend donc effet lors du contrôle du comportement d'envoi du formulaire.

Sans le retour fourni dans la chaîne, le gestionnaire onsubmit généré n'aurait pas d'instruction de retour explicite et une fois déclenché, il renverrait undefined (le retour de la fonction par défaut), que validate () renvoie vrai ou faux et le formulaire être soumis dans les deux cas.

4
mshalaby

Le code du gestionnaire d'événements HTML se comporte comme le corps d'une fonction JavaScript. De nombreux langages tels que C ou Perl renvoient implicitement la valeur de la dernière expression évaluée dans le corps de la fonction. JavaScript ne le fait pas, il le supprime et renvoie non défini sauf si vous écrivez une variable returnEXPR.

4
Denis Howe
<script>
function check(){
    return false;
}
 </script>

<form name="form1" method="post" onsubmit="return check();" action="target">
<input type="text" />
<input type="submit" value="enviar" />

</form>