Javascript evento onchange prevenir el evento onsubmit en el formulario HTML?

StackOverflow https://stackoverflow.com/questions/489527

Pregunta

Considere la posibilidad de un formulario HTML:

<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>

Parece (tanto en IE 6 y Firefox 3) que cuando escriba texto en el campo de entrada y haga clic en enviar que el evento onchange incendios para el campo de entrada, pero el evento onsubmit no de fuego para el formulario hasta que haga clic en el botón de enviar un segundo momento (momento en el que el onchange no de fuego, por supuesto).En otras palabras, el onchange parece impedir el onsubmit de la cocción.

El deseo es la comprobación de cada campo en el formulario cuando el usuario sale del campo, con el fin de proporcionarles inmediata de validación de comentarios, y también para evitar que la presentación del formulario por si hay datos no válidos.

[EDITAR:Tenga en cuenta que tanto la validación de las funciones tienen un alert().]

¿Cómo conseguir alrededor de este problema?

¿Fue útil?

Solución

Solución (de una especie):

Resulta que es solo la presencia de una alerta () - o una confirmación () - durante el evento de cambio de entrada lo que hace que el evento de envío del formulario no se active. El hilo JS parece estar bloqueado por la alerta ().
La solución alternativa es no incluir ninguna alerta () o confirmar () en la llamada de cambio de entrada.

Navegadores conocidos por verse afectados:
IE6 - Windows
IE8 - Gana
FF3 - Ganar

Navegadores que no se ven afectados:
Google Chrome - Ganar
Safari - Mac
FF - Mac

Otros consejos

He probado con Firefox 3 (Mac) con el siguiente código:

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

Parece que funciona.Cuando hago clic en el botón Aceptar, tanto "Vali" y "Verificación de Validez de la Matriz de" pop-up.Inicialmente pensé return false podría ser la razón por la que el formulario no se había presentado, pero ES enviado (al menos, checkValidArray() se llama).

Ahora, ¿qué estás haciendo en tu checkValidArray() y validate() métodos?Algo especial?Puedes publicar el código?

EDITAR:He probado con IE8 y FF3 en windows, y aquí los dos eventos no despidan.No tengo idea de por qué.Tal vez onblur ES una solución, pero ¿por QUÉ onchange no funciona?Hay una razón específica o sólo es una incongruencia?(Funciona tanto en FF, opera y Safari en Mac)

Puede usar el evento onblur en sus entradas en lugar de onchange.

Es bastante interesante que el comportamiento sea diferente en Mac, por lo que parece depender de la plataforma y no del navegador. Debe haber una pista en algún lugar ...

Intenté onblur con el código de Nivas pero obtuve el mismo resultado que con onchange (solo la alerta " Vali ")

Lo que marca la diferencia es si haces cualquier cosa en validate (). Comente la alerta de línea (& Quot; vali & Quot;); ¡y funciona! (El valor de retorno real de validate () no importa, aunque no lo esperaría).

EDITAR: Un colega acaba de probar esto en Google Chrome en Windows y funciona allí. Esto tiene sentido intuitivamente debido a cómo Chrome separa los hilos JS.

Algo sobre la primera alerta () que bloquea el hilo hace que se pierda el evento de envío. ¿Posible condición de carrera?

No crear; botón de enviar. En su lugar, cree un botón normal y escriba una función que se pueda llamar onClick con ese botón.

La función hará la validación en los campos del formulario, y si todo está bien, enviará el formulario. De lo contrario, no lo hará. 

function validate
{
  "Piece of code to Validate your form"
  document.formName.action.value = "URL which you want to call"
 document.propFile.submit(); // It will submit he page
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top