引导程序中的模式表单验证
Modal Form Validation in Bootstrap
我正在使用Twitter引导程序并尝试在我的模态表单上进行验证。
我哪里做错了?
我试过<form role="form">
但它不起作用。
<a href="#" class="btn btn-lg btn-custom1 btn-block" data-toggle="modal" data-target="#reserveModal">Reserve Product</a>
<div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Reserve Product</h4>
</div>
<div class="modal-body">
<!-- FORM -->
<form id="frm_reserve" name="frm_reserve" class="horizontal">
<fieldset>
<div class="form-group">
<label for="inputRName" class="col-xs-6 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-xs-6 control-label">Address</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="email@you.com" required >
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Contact No.</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required >
</div>
</div>
</fieldset>
</form>
我的脚本:
$(document).ready(function() {
$('#reserveModal').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
inputRName: {
validators: {
notEmpty: {
message: 'Your name is required'
}
}
},
textAddress: {
validators: {
notEmpty: {
message: 'Your address is required'
}
}
},
inputREmail: {
validators: {
notEmpty: {
message: 'Your email is required'
}
}
},
inputRContact: {
validators: {
notEmpty: {
message: 'Your contact number is required'
}
}
}
}
});
});
任何帮助将不胜感激。我也愿意接受建议。
为清楚起见,添加了$(document).ready(function()
。
将formValidation plugin
与framework: 'bootstrap'
一起使用时验证不起作用的可能和常见原因主要是忘记包含bootstrap.js
OR bootstrap.min.js
formValidation
插件附带的 formValidation plugin
需要此文件才能使用引导框架。
不要将 Bootstrap(.min).jsBootstrap 框架提供的文件与 FormValidation 提供的 bootstrap(.min) 混淆.js后者位于 formvalidation/dist/js/framework 目录中。
它们是两个不同的文件,都需要包含它们。
可以在此处找到参考以及将formValidation plugin
与引导框架一起使用时要包含哪些库
$(document).ready(function() {
$('#reserveModal').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
inputRName: {
validators: {
notEmpty: {
message: 'Your name is required'
}
}
},
textAddress: {
validators: {
notEmpty: {
message: 'Your address is required'
}
}
},
inputREmail: {
validators: {
notEmpty: {
message: 'Your email is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
inputRContact: {
validators: {
notEmpty: {
message: 'Your contact number is required'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9's'-()+'.]+$/
}
}
}
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.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>
<a href="#" class="btn btn-lg btn-custom1 btn-block" data-toggle="modal" data-target="#reserveModal">Reserve Product</a>
<div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Reserve Product</h4>
</div>
<div class="modal-body">
<!-- FORM -->
<form id="frm_reserve" name="frm_reserve" class="horizontal">
<fieldset>
<div class="form-group">
<label for="inputRName" class="col-xs-6 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-xs-6 control-label">Address</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="email@you.com" required>
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Contact No.</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required>
</div>
</div>
</fieldset>
</form>
小提琴工作示例
相关文章:
- 解析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路径