jQuery validate-使用Toastr显示消息 [英] Jquery validate - show messages with Toastr
本文介绍了jQuery validate-使用Toastr显示消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用jquery validate.js来验证表单.我想将验证消息显示为Toastr弹出窗口，我试图添加Toastr函数，如下所示:
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"
}
},
....
但是由于某种原因，它会保持重复的弹出窗口-而不是一个弹出窗口-它会创建3 .... 我也想防止消息重复-因此，如果出现错误消息，则只会显示一条消息-无论用户提交多少次...
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...
推荐答案
知道了...
<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-使用Toastr显示消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
