[英]Bootstrap Modal Styled Form Validation
我正在尝试修改Bootstrap模态,以使表单显示错误并且在表单输入为空时不提交。 我知道“ required”命令是另一种可能性,但我想对其进行样式设置,使其看起来更好一些。 我只是复制并粘贴了别人所做的事情,并且可以在他们的网站上正常工作( http://formvalidation.io/examples/modal/#resetting-form-when-showing-the-modal ),但不是我的。 当我单击带有空白字段的提交时,模式关闭。
这是我的代码:
HTML:
<button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Request an Appointment</h5>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone Number</label>
<div class="col-xs-5">
<input type="number" class="form-control" name="number" placeholder="(888)888-8888" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#loginForm').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
number: {
validators: {
notEmpty: {
message: 'The phone number is required'
}
}
}
}
});
});
您忘记了包含一个必需的JS库,该库会导致具有空白字段的表单无需验证就可以提交,并且模式会被关闭,此外,代码没有任何问题,
需要CSS
所需的JS库
formValidation
插件中, formValidation
插件支持Bootstrap框架,必须包含在文档中才能formValidation
Bootstrap Framework
库) $(document).ready(function() { $('#loginForm').formValidation({ framework: 'bootstrap', excluded: ':disabled', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { name: { validators: { notEmpty: { message: 'The name is required' } } }, number: { validators: { notEmpty: { message: 'The phone number is required' } } } } }); });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script> <button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button> <!-- Modal --> <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h5 class="modal-title">Request an Appointment</h5> </div> <div class="modal-body"> <!-- The form is placed inside the body of modal --> <form id="loginForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Full Name</label> <div class="col-xs-5"> <input type="text" class="form-control" name="name" /> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Phone Number</label> <div class="col-xs-5"> <input type="number" class="form-control" name="number" placeholder="(888)888-8888" /> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-3"> <button type="submit" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </form> </div> </div> </div>
尝试这样称呼它:
$(document).ready(function() {
$('#submit').click(function(e){
e.prevetDefault();
$('#loginForm').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
number: {
validators: {
notEmpty: {
message: 'The phone number is required'
}
}
}
}
return false;
});
})
});
不幸的是我没有这个插件,所以我不能测试它。 如果这不起作用,请不要怪我。 通常我使用免费的'jquery.validate.js'。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.