引导模式样式的表单验证
Bootstrap Modal Styled Form Validation
我正在尝试修改Bootstrap模态,以便在表单输入为空时表单显示错误并且不提交。我知道"required"命令是另一种可能性,但我想把它设计得好看一点。我只是简单地复制并粘贴了别人所做的事情,它在他们的网站上有效(http://formvalidation.io/examples/modal/#resetting-显示模态时的形式),但不是我的。当我单击带有空字段的提交时,模态关闭。
这是我的代码:
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要求
- Bootstrap.css
- 表单验证.min.css
- Font-awesome.min.css
JS库需要
- jQuery.js
- Bootstrap.js(引导框架)
- 表单验证.min.js
- Bootstrap.min.js(您错过了包含的这个库附带了
formValidation
插件,用于支持Bootstrap框架工作,必须包含在文档中才能进行验证
注意:这不是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>
Fiddle
试着这样称呼它:
$(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"。
相关文章:
- 解析javascript表单验证器
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 自定义表单验证和提交
- Javascript表单验证的缺点
- Jquery的表单验证不起作用
- 语义ui表单验证:图像url
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- JavaScript表单验证-“;“错误”;不按需要工作
- Mailchimp内联表单验证不适用于JS加载的HTML
- jQuery/JS获胜't在表单验证后重定向
- jquery表单验证复选框错误显示
- javascript表单验证-数值和密码
- 我想知道如何在javascript中进行表单验证
- jQuery表单验证(如果==“执行此操作”)仅适用于第一次输入
- 使用记录保存的消息进行表单验证
- 表单验证工作不正常,在不检查条目的情况下继续
- 如何对未知表单元素进行表单验证
- 使用ajax、php和mysql进行表单验证
- JS表单验证未发生
- 表单验证jsphp路径