gpt4 book ai didi

javascript - Bootstrap 中的警报消息

转载 作者:行者123 更新时间:2023-11-27 23:51:58 26 4
gpt4 key购买 nike

我的注册表单位于模式内,我希望每当用户未填写表单时,就必须显示 Bootstrap 的警报消息。我尝试搜索如何实现这个,并找到了这个。

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add System Roles</h4>
</div>
<div class="modal-body">


@using (Html.BeginForm("Create", "SystemRoles", FormMethod.Get, new { @name = "register"})) { @Html.ValidationSummary(true)
<div id="formAlert" class="alert hide">
<a class="close">×</a>
<strong>Warning!</strong> Make sure all fields are filled and try again.
</div>
<span class="editor-label">
@Html.Label("Role Name:")
</span>
<span class="editor-field">
<input type="text" id="role_name" name="role_name" >
</span><text>&nbsp; &nbsp;</text>
<button type="submit" class="btn btn-primary">Add</button> }
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

:

$(document).ready(function() {
//alert message implementation
$('form[name="register"]').on("submit", function(e) {
var role_name = $(this).find('input[name="role_name"]');
if ($.trim(role_name.val()) === "") {
e.preventDefault();
$("#formAlert").slideDown(400);
}
});

$(".alert").find(".close").on("click", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).closest(".alert").slideUp(400);
});

});

这段代码有什么问题?为什么警报不起作用或显示?

请帮忙。

最佳答案

从以下位置删除隐藏类:

<div id="formAlert" class="alert hide">

在 jQuery 函数中添加以下内容:

$("#formAlert").hide();

我用渲染的页面做了演示。

$(function() {
$("#myModal").modal();
$("#formAlert").hide();
$('form[name="register"]').on("submit", function(e) {
var role_name = $(this).find('input[name="role_name"]');
if ($.trim(role_name.val()) === "") {
$("#formAlert").slideDown(400);
e.preventDefault();
}
});

$(".alert").find(".close").on("click", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).closest(".alert").slideUp(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add System Roles</h4>

</div>
<div class="modal-body">
<form name="register" method="post">
<div id="formAlert" class="alert"> <a class="close">×</a> <strong>Warning!</strong> Make sure all fields are filled and try again.</div> <span class="editor-label">
Role Name:
</span>
<span class="editor-field">
<input type="text" id="role_name" name="role_name" >
</span>

<text>&nbsp; &nbsp;</text>
<button type="submit" class="btn btn-primary">Add</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

希望这对您有帮助。

Demo

关于javascript - Bootstrap 中的警报消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32621246/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com