Jquery validate - 使用Toastr显示消息

Question

我正在使用jquery validate.js来验证表单。我想将验证消息显示为Toastr弹出窗口，我试图像这样添加Toastr函数：

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

但由于某种原因，它会保留弹出复制品 - 而不是一个弹出窗口 - 它会创建3 .... 我也希望防止邮件重复 - 所以如果有错误信息，只会显示一条 - 无论用户提交多少次......

Fiddle

Answer 1

得到了......

           <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
                }
            });
        });