Jquery validate - show messages with Toastr

Question

I'm using jquery validate.js for validating a form. I want to show the validation messages as Toastr popups, I've tried to add the Toastr function like this :

....
messages: {
    "email": {
        required: function() {
            toastr.warning("Warning")
        },
        email: "Email is invalid"
    }
},
....

but it's keeps duplicate the popup for some reason - and instead of one popup - it creates 3.... I want to prevent messages duplication also - so if there is an error message than only one will displayed - no matter how many times the user submit...

Fiddle

Integrating this validation plugin with another plugin for popup messages is no trivial task. It will solely depend on the scope of the callback functions built into Toastr and then require more than just one line of code within the `messages` object. For example, check out this answer to get an idea of how it was done using ToolTipster: https://stackoverflow.com/a/14741689/594235 — Sparky, Dec 23 '17 at 21:30
To quickly answer the question: that's because the `messages` object is for setting the text content of a custom message. It's not meant for calling code to do something else. Like stated in my first comment, you'll need to leverage several other callback functions for that. It might help if you showed more of the relevant code within your post rather than relying on the jsFiddle. — Sparky, Dec 23 '17 at 21:34
@Sparky, thanks, what i've showed in fiddle is pretty much what i've done so far... i want to check if it can be done at all ... i'll do more attempts and post them once i'll succeed. — RoyBarOn, Dec 23 '17 at 21:59

score 1 · Answer 1 · edited Oct 12 '19 at 15:47

Got it...

           <form id="formParams">
            <div class="form-group">
                <label for="exampleFormControlInput1">Email address</label>
                <input type="email" class="form-control" name="email" placeholder="name@example.com">
            </div>

            <div class="form-group">
                <label for="phone"> multiple select</label>
                <input id="phone" class="form-control" type="tel" name="phone">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Example textarea</label>
                <textarea class="form-control" name="textarea" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">
                Submit
            </button>
        </form>

Js

$(document).ready(function() {

    $("#formParams").validate({

        rules: {
            "email": {
                required: true,
            },
            "phone": {
                required: true,
            },

        },
        messages: {
            "email": {
                required: function() {
                    toastr.error('email field is required')
                },
            },
            "phone": {
                required: function() {
                    toastr.error('phone field is required')
                },

            },

        },
        submitHandler: function(form) { // for demo
            toastr.success('success')
            return false; // for demo
        }
    });
});

Jquery validate - show messages with Toastr

1 Answers1

Linked