Protegendo seus formulários com jQuery

Um problema muito comum em alguns sistemas é chamado de “submit múltiplo”, é quando aquele usuário apressadinho clica 5x no [enviar] achando que vai tornar tudo mais rápido e, dependendo do sistema, isso causa um desastre.

Criei um pedacinho de código pequeno porém muito do útil que ajuda a evitar esse mal da seguinte forma: assim que o formulário é enviado ele desabilita todos os campos e botões de submit, fazendo com que não seja possível alterar os dados ou enviar o formulário novamente.

É só incluir essas linhas no seu site:

1	$(function() {

2	$("form").submit(function() {

3	// ReadOnly em todos os inputs

4	$("input", this).attr("readonly", true);

5	// Desabilita os submits

6	$("input[type='submit'],input[type='image']", this).attr("disabled",true);

7	return true;

8

});

9

});

Mas há um probleminha com esse código: se você usar algum tipo de validação por JavaScript (também ativado pelo submit do formulário) o codigo não vai funcinar caso o usuário tenha digitado algo que invalide o formulário.

Uma solução seria chamar essa função de validação dentro desse código jQuery, da seguinte forma:

01	$(function() {

02	$("form").submit(function() {

03	if (minhaFuncao() == true) {

04	// ReadOnly em todos os inputs

05	$("input", this).attr("readonly", true);

06	// Desabilita os submits

07	$("input[type='submit'],input[type='image']",this).attr("disabled", true);

08	return true;

09

} else {

10	return false;

11

}

12

});

13

});

Com isso nós iremos bloquear o próximo submit apenas quando os dados forem validados.