sexta-feira, 22 de julho de 2011

IE8 não gera evento form submit, em certas condições

Ultimamente, tenho andado a dançar o fandango com o IE8, ao fazer um 'port' de uma aplicação IE6 para IE8.

Infelizmente os bugs são mais que muitos: James Hopkins IE8 Bugs e Gérald Talbot's IE8 Bugs chegam para ter uma ideia dos problemas que se tem pela frente, já para não falar nos modos de (in)compatibilidade, que o bicho trás para o IE7.
Estranho é que alguns anos após o lançamento do IE8, a grande maioria dos problemas continua por resolver.

Mas voltando ao que interessa, o IE8 tem outro BUG ainda não documentado que consiste na falha em gerar um evento de 'submit' num form, em certas condições.

Se tivermos o seguinte código, o IE8 gera o evento 'submit' correctamente:
<form action="login">
<label for="user">User</label>
<input id="user" name="user" type="text" value="" />
<br/>
<label for="pass">Pass</label>
<input id="pass" name="pass" type="password" value="" />
<br/>
<input type="submit" value="Submit" />
</form>


Mas se quisermos adicionar um botão adicional, para por exemplo limpar o form (exemplo simplificado), o evento já não é despoletado.
NOTA: A implementação da funcionalidade em 'javascript' não é mostrada.

<form action="login">
<label for="user">User</label>
<input id="user" name="user" type="text" value="" />
<br/>
<label for="pass">Pass</label>
<input id="pass" name="pass" type="password" value="" />
<br/>
<input id="iClear" type="button" value="limpar" />
<input id="iSubmit" type="submit" value="Submit" />
</form>


E isto acontece apenas e somente, porque o IE8 não gosta que exista nenhum INPUT do tipo 'button', antes de um INPUT do tipo 'submit'. Isto é. aparentemente o IE8 procura o primeiro botão disponível e activa-o, mas se não fôr um botão do tipo 'submit', o form não é submetido, pois activa o botão errado.

A solução passa por ter o INPUT com o type='submit' aparecer em primeiro lugar no HTML.

<form action="login">
<label for="user">User</label>
<input id="user" name="user" type="text" value="" />
<br/>
<label for="pass">Pass</label>
<input id="pass" name="pass" type="password" value="" />
<br/>
<input id="iSubmit" type="submit" value="Submit" />
<input id="iClear" type="button" value="limpar" />
</form>


Se não gostarem do botão à esquerda, até por questões de usabilidade, podem sempre posicionar os botões por css com um float:right, que na pratica vos inverte a ordem relativamente a existente no HTML.