3

Estou usando o toastr.js para mostrar mensagens de validação de formulário, mas ao usar este plugin ele inutilizou todos os meus inputs que tinham a propriedade required.

Meu código:

<!DOCTYPE html>
<html>
    <head>
        <title>TOASTR</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
    </head>
    <body>
        <form>
            <p>First Name: <input type="text" name="firstname" required></p>
            <p>Last Name: <input type="text" name="lastname" required></p>
            <p><button class="btnsubmit" type="submit" value="submit" data-toastr="success" data-message="Thanks for your donate.">Submit</button></p>
        </form>
        <script>
            toastr.options.closeButton = true;

            $('[data-toastr="success"]').on('click', function (event) {
                event.preventDefault();

                toastr.success($(this).data('message'));
            });
        </script>
    </body>
</html>

Alguém sabe o porquê disso?

1 Resposta 1

2

Bem, o principal motivo disto é que você está usando o método .preventDefault(), em um botão submit, ou seja, não fará com que o formulário seja submetido. A validação feita pelos required só acontece no momento da submissão.

Se quer que seja feita a validação, e só depois o toastr.js entre em ação, pode colocar, ao invés de evento click no input:submit, um evento submit no form:

toastr.options.closeButton = true;

$('#toastrForm').on('submit', function (event) {
    event.preventDefault();
    toastr.success($('[data-toastr="success"]').data('message')); // ao invés do $(this) usei o método de seleção anterior...
});

Assim, a chamado da toastr só irá acontecer após a submissão, ou seja, antes acontecerá a validação pelos required.

Funcionando - JsFiddle

1
  • Samir Braga, +1, perfeito, funcionou liso liso, e muito obrigado pela explicação!
    – DevRyu
    Commented 19/01/2016 às 14:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .