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.

Por Programação Pular para comentários
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:
$(function() {
    $("form").submit(function() {
        // ReadOnly em todos os inputs
        $("input", this).attr("readonly", true);
        // Desabilita os submits
        $("input[type='submit' ],input[type='image' ]", this).attr("disabled", true);
        return true;
    });
});


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:
$(function() {
    $("form").submit(function() {
        if (minhaFuncao() == true) {
            // ReadOnly em todos os inputs
            $("input", this).attr("readonly", true);
            // Desabilita os submits
            $("input[type='submit' ],input[type='image' ]", this).attr("disabled", true);
            return true;
        } else {
            return false;
        }
    });
});


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

Espero que tenham gostado! :)

Atualização: Troquei o código por um que funciona no IE6, não tem alert() e é mais fácil de entender.

Autor: Thiago Belem | Fonte: blog.thiagobelem.net

Compartilhe com seus amigos:
Mais sobre: jquery, formularios
Jether Netto Canhada ALves
Jether Netto Canhada ALves Diretor da Tipis Mobile iOS Developer Experiencia em Objective-C, iOS, iPhone , iPod e iPad, TestFlightApp, Core Data, SQLite, Push Notification, MapKit, UrbanAirship .NET Developer Atuar como Desenvolvedor C#, Asp.NET, Silverlight,WPF,XHTML, CSS3, Mysql, SQL SERVER, PostgreSQL.
FACEBOOK // TWITTER: @jether_
Quer conversar com o(a) Jether, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.