Jquery validate - 使用 Toastr 显示消息答案

【问题标题】：Jquery validate - show messages with ToastrJquery validate - 使用 Toastr 显示消息
【发布时间】：2025-11-27 19:05:01
【问题描述】：

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

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

但由于某种原因它会重复弹出窗口 - 而不是一个弹出窗口 - 它会创建 3.... 我还想防止消息重复 - 因此，如果出现错误消息，则只会显示一条消息 - 无论用户提交多少次......

Fiddle

【问题讨论】：

将此验证插件与另一个弹出消息插件集成并非易事。它仅取决于内置于 Toastr 中的回调函数的范围，然后在 messages 对象中需要不止一行代码。例如，查看此答案以了解如何使用 ToolTipster 完成此操作：*.com/a/14741689/594235
快速回答问题：这是因为messages 对象用于设置自定义消息的文本内容。它并不意味着调用代码来做其他事情。就像我在第一条评论中所说的那样，您需要为此利用其他几个回调函数。如果您在帖子中显示更多相关代码而不是依赖 jsFiddle，这可能会有所帮助。
@Sparky，谢谢，我在小提琴中展示的几乎就是我到目前为止所做的......我想检查它是否可以完成......我会做更多尝试并在我成功后发布它们。

标签： jquery jquery-validate toastr

【解决方案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>

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

【讨论】：