javascript - onclick 按钮仅显示一次 toastr 并将错误消息分组到 toastr
问题描述
我正在使用 toastr jquery 插件。下面是链接
https://github.com/scottoffen/jquery.toaster
我在这里面临两个问题
当前单击按钮时显示多个通知(请参阅附图)
预期:每次点击应该显示一个通知,如果通知存在则不显示另一个。
- 将多个通知分组的方法
预期:组名称和密码一起作为单个通知
代码
$(".actions").on("click", ".startWorkflowD", function() {
//Disable Start workflow button
$('.startWorkflowD').attr('disabled', 'disabled');
var userDisplayName = $("#HEADER_USER_MENU_POPUP_text").text().toLowerCase();
var actualUserDisplayName = $("#name").val().toLowerCase();
if (userDisplayName != actualUserDisplayName) {
$.toaster({
priority: 'warning',
title: 'Authentication Failed',
message: '<br/>' + 'Please enter valid Name (First name and Last name), to start the workflow.'
});
//Enable start workflow button
$('.startWorkflowD').removeAttr("disabled");
return;
}
var password = $("#Password");
if (password.val().length == 0) {
// password is empty
$.toaster({
priority: 'warning',
title: 'Authentication Failed',
message: '<br/>' + 'Please enter valid Password, to start the workflow.'
});
//Enable start workflow button
$('.startWorkflowD').removeAttr("disabled");
}
});
任何帮助表示赞赏
我试过下面的stackoverflow答案,我的toastr没有**"preventDuplicates": true,**
选项
解决方案
它可能对某人有所帮助。这是我做的一个示例演示。
- 不允许重复
- 进度条
选项有图标
<input type="text" name="name" id="name" placeholder="Name" />
<br>
<input type="password" name="Password" id="Password" placeholder="Password" />
<br>
<input type="button" class="actions" value="Login" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"
type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-right",
"preventDuplicates": true,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
$(".actions").on("click", function () {
var name = $("#name").val();
var pwd = $("#Password").val();
var errmsg = "";
if (name == "") {
errmsg = "Please enter valid Name (First name and Last name)";
}
if (pwd == "") {
errmsg += " Please enter valid Password";
}
if (errmsg != "")
toastr.error(errmsg + ' to start the workflow.');
});
</script>
推荐阅读
- javascript - Dialogflow V2 API 调用 Javascript
- regex - 从每个 id 的字符串中提取多个值
- sql - 通过将两个查询的结果连接在一起来组合它们
- java - Spring Cloud Consul 客户端不会忽略关键服务
- amazon-web-services - 在 AWS SageMaker Ground Truth 自定义标签作业的后注释 lambda 中正确返回标签
- c# - Excel 单元格引用没有返回任何内容
- javascript - Vue 不更新全局状态
- homebrew - ==> 修复 /usr/local/opt/macos-updater/bin/macos-updater 权限从 755 到 444
- nlp - 使用 LDA 进行主题建模。查找剪影分数
- reset - 如何在 Apereo CAS 6.1.x 中重置 Principal attributeMap?