应用验证时，按钮单击事件不会在引导模式窗口上触发。 [英] Button click event is not firing on bootstrap modal window when validation is applied.
本文介绍了应用验证时，按钮单击事件不会在引导模式窗口上触发。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hello
当我在模态窗口中应用验证时，按钮单击事件在引导模式窗口内没有触发。如果我删除了bootstrap验证，那么按钮点击事件就会被触发。
任何人都试图修复它。
谢谢，
Imtiyaz
我的尝试：
Hello
Button click event is not firing inside the bootstrap modal window when I apply validation inside the modal window. If I remove the bootstrap validation, the button click event is firing.
Anyone try to fix it.
Thanks,
Imtiyaz
What I have tried:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-md-4 control-label">Password </label>
<div class="col-md-6">
<asp:TextBox ID="txtPassword" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Confirm Password </label>
<div class="col-md-6">
<asp:TextBox ID="txtConfirmPassword" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Submit"></asp:Button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">First Name </label>
<div class="col-md-6">
<asp:TextBox ID="txtFirstName" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Last Name </label>
<div class="col-md-6">
<asp:TextBox ID="txtLastName" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Email </label>
<div class="col-md-6">
<asp:TextBox ID="txtEmail" runat="server" class="form-control"></asp:TextBox>
</div>
</div>
<div class="col-md-12">
<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Text="Submit" OnClick="Button1_Click"></asp:Button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#Button1").click(function () {
$('#form1').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtFirstName: {
validators: {
notEmpty: {
message: 'First name is required'
}
}
},
txtLastName: {
validators: {
notEmpty: {
message: 'Last name is required'
}
}
},
txtEmail: {
validators: {
notEmpty: {
message: 'First name is required'
},
emailAddress: {
message: 'Please provide a valid email address'
}
}
}
}
})
});
$("#Button2").click(function () {
$('#form1').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtPassword: {
validators: {
notEmpty: {
message: 'Password is required'
}
}
},
txtConfirmPassword: {
validators: {
notEmpty: {
message: 'Confirm password is required'
}
}
}
}
});
});
</script>
推荐答案
（＃Button1）。click（function（）{
("#Button1").click(function () {
（'＃form1'）。bootstrapValidator（{
feedbackIcons：{
有效：'glyphicon glyphicon-ok'，
无效：'glyphicon glyphicon-remove'，
验证：'glyphicon glyphicon-refresh'
}，
字段：{
txtFirstName：{
验证器：{
notEmpty：{
消息：'名字是必需的'
}
}
}，
txtLastName：{
验证者：{
notEmpty：{
消息：'姓氏是必需的'
}
}
}，
txtEmail：{
验证者：{
notEmpty：{
message ：'名字是必需的'
}，
emailAddress：{
message：'请提供有效的电子邮件地址'
}
}
}
}
}）
}）;
('#form1').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { txtFirstName: { validators: { notEmpty: { message: 'First name is required' } } }, txtLastName: { validators: { notEmpty: { message: 'Last name is required' } } }, txtEmail: { validators: { notEmpty: { message: 'First name is required' }, emailAddress: { message: 'Please provide a valid email address' } } } } }) });
（＃Button2）。click（function（）{
("#Button2").click(function () {
这篇关于应用验证时，按钮单击事件不会在引导模式窗口上触发。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
