evento Javascript onchange prevenção evento onsubmit no formulário HTML?

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

Pergunta

Considere um formulário HTML: 

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

Parece (no IE 6 e Firefox 3) que quando você digita algum texto no campo de entrada e clique em enviar que os fogos evento OnChange para o campo de entrada, mas o evento onsubmit não dispara para o formulário até que você clique no botão enviar uma segunda vez (momento em que o onchange não dispara, é claro). Em outras palavras, o onchange parece impedir o onsubmit de disparar.

O desejo é o de verificar cada campo no formulário quando o usuário sai do campo a fim de proporcionar-lhes feedback validação imediata, e também para evitar a apresentação do formulário, se houver dados inválidos.

[EDIT:. Note-se que ambas as funções de validação conter um alerta ()]

Como se contornar este problema?

Foi útil?

Solução

Solution (de uma espécie):

Acontece que é apenas a presença de um alerta () - ou um confirm () - durante o evento onchange do input que provoca evento onsubmit do formulário para não fogo. O segmento JS parece ficar bloqueado pelo alerta ().
A solução é não incluem qualquer alerta () ou confirm () na chamada onchange da entrada.

Navegadores conhecidos por serem afetados:
IE6 - Windows
IE8 - Win
FF3 - Win

Navegadores conhecidos não ser afetado:
Google Chrome - Win
Safari - Mac
FF - Mac

Outras dicas

Eu tentei com o Firefox 3 (Mac) com o seguinte 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. Quando clico no botão Ok, tanto "Vali" e "Check matriz válida" pop up. Inicialmente eu pensei return false poderia ser a razão por que o formulário não foi apresentado, mas é apresentado (pelo menos, checkValidArray() é chamado).

Agora, o que você está fazendo em seus checkValidArray() e validate() métodos? Algo especial? Você pode postar o código?

EDIT: Eu testei com o IE8 e FF3 em janelas, e aqui ambos os eventos não ser demitido. Eu não tenho ideia do porquê. Talvez onblur é uma solução, mas por que onchange não trabalho? Existe uma razão específica ou é apenas outra incoerência? (Funciona tanto em FF e Safari no Mac)

Você pode usar o evento onblur em suas entradas em vez de onchange.

É muito interessante que o comportamento é diferente no Mac, por isso parece plataforma do navegador dependentes e não dependentes. Deve ser uma pista lá em algum lugar ...

Eu tentei onblur com código Nivas', mas teve o mesmo resultado que com onchange (somente o alerta 'Vali').

O que faz a diferença é se você qualquer em validate (). Comentar o alerta de linha ( "vali"); e funciona! (O valor de retorno real do validate () não importa, embora eu não esperaria que ele.)

EDIT: Um colega apenas tentei isso no Google Chrome no Windows e funciona lá. Esta intuitivamente faz sentido por causa de como Chrome separa tópicos JS.

Algo sobre o primeiro alerta () bloqueando o fio faz com que o evento onsubmit para se perder. condição de corrida possível?

Não criar; botão de envio. Em vez disso, criar um botão normal e escrever uma função que pode ser chamado onClick com esse botão.

Função vai fazer a validação sobre os campos do formulário, e se tudo estiver bem, ele vai enviar o formulário. Caso contrário, ele não vai. 

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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top