[英]Modal Form Validation in Bootstrap
我正在使用twitter bootstrap並嘗試將驗證放在我的模式形式上。
我哪里做錯了?
我嘗試了<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框架提供的bootstrap(.min).js文件與FormValidation提供的bootstrap(.min).js混淆,后者位於formvalidation / dist / js / framework目錄中。
它們是兩個不同的文件,並且都需要包含它們。
可以在此處找到參考,以及在帶有bootstrap框架的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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.