jQuery validate-用toastr显示消息

Question

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

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

，但由于某种原因，它可以使弹出窗口复制 - 而不是一个弹出窗口 - 它创建了3 ....我也想防止消息重复 - 因此，如果有错误消息比仅显示的消息显示 - 无论用户提交多少次...

小提琴

Answer 1

得到了...

           <form id="formParams">
            <div class="form-group">
                <label for="exampleFormControlInput1">Email address</label>
                <input type="email" class="form-control" name="email" placeholder="[e-mail]">
            </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
        }
    });
});