javascript - event - Con la validación de formulario: ¿por qué onsubmit="return functionname()" en lugar de onsubmit="functionname()"?

mouse events javascript

Question

La pregunta es bastante autoexplicativa. No entiendo lo que hace la devolución en el siguiente código:

<form onsubmit="return somefunction()">

Answer 1

Cuando se proporciona onsubmit (o cualquier otro evento) como un atributo HTML , el valor de cadena del atributo (por ejemplo, "return validate ();") se inyecta como el cuerpo de la función real del controlador de onsubmit cuando se crea el objeto DOM para el elemento.

Aquí hay una breve prueba en la consola del navegador:

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
// }

Entonces, en caso de que la palabra clave return se suministre en la declaración inyectada; cuando se activa el controlador de envío, el valor de retorno recibido de la llamada a la función de validación se pasará como el valor de retorno del controlador de envío y, por lo tanto, tendrá efecto en el control del comportamiento de envío del formulario.

Sin el retorno provisto en la cadena, el manejador onsubmit generado no tendría una declaración de retorno explícita y cuando se activara devolvería indefinido (el retorno de la función predeterminada) independientemente de si validate () devuelve verdadero o falso y el formulario se enviaría en ambos casos.

Answer 2

El código del controlador de eventos HTML se comporta como el cuerpo de una función de JavaScript. Muchos lenguajes como C o Perl devuelven implícitamente el valor de la última expresión evaluada en el cuerpo de la función. JavaScript no lo hace, lo descarta y devuelve indefinido a menos que escriba una return EXPR explícita.

Answer 3

Necesita la devolución para que el verdadero / falso se transfiera al evento de envío del formulario (que busca esto y evita el envío si recibe un falso).

Veamos algunos JS estándar:

function testReturn() { return false; }

Si solo lo llama dentro de cualquier otro código (ya sea un controlador de clic o en JS en otro lugar) se volverá falso, pero debe hacer algo con ese valor.

...
testReturn()
...

En ese ejemplo, el valor de retorno está regresando, pero no pasa nada con él. Básicamente estás diciendo que ejecutes esta función, y no me importa lo que devuelva. En contraste si haces esto:

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

entonces has hecho algo con el valor de retorno.

Lo mismo se aplica a los controladores onclick. Si solo llama a la función sin la devolución en el envío de inscripciones, entonces está diciendo "ejecute esto, pero no evite el evento si devuelve falso". Es una forma de decir ejecutar este código cuando se envía el formulario, pero no permita que detenga el evento.

Una vez que agrega la declaración, está diciendo que lo que está llamando debe determinar si el evento (envío) debe continuar.

Esta lógica se aplica a muchos de los eventos onXXXX en HTML (onclick, onsubmit, onfocus, etc.).

Answer 4

Si se devuelve false desde la función, se detendrá el evento. Es decir, detendrá el envío del formulario.

es decir

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
}
}

Answer 5

Una extensión de lo que dice GenericTypeTea: aquí hay un ejemplo concreto:

<form onsubmit="return false">

El formulario anterior no se presentará , mientras que ...

<form onsubmit="false">

... no hace nada, es decir, el formulario se enviará .

Sin el return , onsubmit no recibe un valor y el evento se ejecuta como si no hubiera ningún controlador.

Answer 6

<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>