toastr.js disabling the required HTML5 property

Question

toastr.js disabling the required HTML5 property

Navigation

#1 by (2 votes)

3

I'm using toastr.js to display form validation messages, but using this plugin it disabled all my inputs that had the required property.

My code:

<!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><linkrel="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>FirstName:<inputtype="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>

Does anyone know why?

jquery html5

asked by anonymous 18.01.2016 / 16:20

1 answer

Lock keyboard and mouse in C #, but keeping the execution of a method Mongodb reference

score 2 · Accepted Answer

Well, the main reason for this is that you are using the .preventDefault() method on a submit button, that is, it will not cause the form to be submitted. The validation done by required only happens at the time of submission.

If you want the validation to be done, and only after toastr.js takes action, you can put, instead of click event in input:submit , a submit event in 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...
});

So, the call of toastr will only happen after the submission, that is, before the validation will happen by required .

toastr.js disabling the required HTML5 property

1 answer

Running - JsFiddle