我正在尝试使用 bootstrapValidator 以 DD / MM / YYYY 格式验证日期，但不知怎的，它无效。试图搞清楚，但遗憾的是找不到新手的确切原因。
除此之外，以下几点需要纠正：
当您开始输入正确的值时，所有框（边框颜色）一次变为绿色。但是只要其中一个验证失败，它们就会变成红色。我想要的是，只有相关的输入框应该变为绿色，如果验证成功＆amp;如果失败则变红。
在验证失败时，在手机号码部分显示消息“请输入与模式匹配的值”，这似乎是默认的错误消息。有没有办法指定自定义错误消息？
Any help would be great !!
registrationPage.html
<body>
<div class="form-group">
<div class="col-xs-6" id="content"><img src="igxam cover pic6.png" class="img-responsive" alt="igxam logo" width="500" height="300"/></div>
<div class="col-xs-5 panel-body">
<form id="loginForm" action="" method="post" accept-charset="utf-8">
<legend>Sign Up</legend>
<h2>It's free and always will be.</h2> <br/>
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="text" name="firstname" id="firstname" value="" class="form-control input-medium " placeholder="First Name" />
<span class="help-block with errors" id="firstNameMessage"></span>
</div>
<div class="col-xs-6 col-md-6">
<input type="text" name="lastname" id="lastname" value="" class="form-control input-medium" placeholder="Last Name" />
<span class="help-block lastNameMessage"></span>
</div>
</div>
<input type="text" name="emailadd" id="emailadd" value="" class="form-control input-medium" placeholder="Your Email" />
<span class="help-block" id="emailaddMessage"></span>
<input type="text" name="contactno" id="contactno" value="" class="form-control input-medium"
placeholder="Mobile Number" pattern="^([7-9]{1})([0-9]{9})$" title="Please enter a valid mobile no" />
<span class="help-block" id="contactnoMessage"></span>
<input type="password" name="password" id="password" value="" class="form-control input-medium" placeholder="Password" />
<span class="help-block" id="passwordMessage"></span>
<br />
<label for="birthdate" id="birthdate">Birth Date</label>
<div class="row">
<div class="col-md-3">
<select name="dob_day" id="dob_day" class="form-control input-medium required" >
<option value="">Day</option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
<option value="9">9th</option>
<option value="10">10th</option>
<option value="11">11th</option>
<option value="12">12th</option>
<option value="13">13th</option>
<option value="14">14th</option>
<option value="15">15th</option>
<option value="16">16th</option>
<option value="17">17th</option>
<option value="18">18th</option>
<option value="19">19th</option>
<option value="20">20th</option>
<option value="21">21st</option>
<option value="22">22nd</option>
<option value="23">23rd</option>
<option value="24">24th</option>
<option value="25">25th</option>
<option value="26">26th</option>
<option value="27">27th</option>
<option value="28">28th</option>
<option value="29">29th</option>
<option value="30">30th</option>
<option value="31">31st</option>
</select>
<span class="help-block" id="dob_dayMessage"></span>
</div>
<div class="col-xs-4">
<select name="dob_month" id="dob_month" class="form-control input-medium required" >
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<span class="help-block" id="dob_monthMessage"></span>
</div>
<div class="col-xs-3">
<select name="dob_year" id="dob_year" class="form-control input-medium" >
<option value="">Year</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
<span class="help-block" id="dob_yearMessage"></span>
</div>
</div>
<label for="gender">Gender</label>
<div class="row" id="gender">
<div class="col-xs-12 selectContainer">
<select name="gender" class="form-control input-medium" >
<option value="">Please select your gender</option>
<option>Male</option>
<option>Female</option>
</select>
<span class="help-block" id="genderMessage"></span>
</div>
</div>
<br /><br />
<samp style="font-size:14px">By clicking Create my account, you agree to our <a href="#">Terms</a> and that
you have read our <a href="#">Data Policy</a>, including our <a href="#">Cookie Use.</a></samp>
<br /><br />
<button class="btn btn-lg btn-primary btn-block signup-btn" type="submit">Create my account</button>
</form>
</div>
</div>
<br/><br/><br/>
<div class="row">
<div class="col-xs-6" id="content"></div>
<div class="col-xs-4">
<div id="navbar-fixed"></div>
</div>
</div>
<div class="col-md-5 col-md-offset-6"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#loginForm').bootstrapValidator({
fields: {
firstname: {
trigger: 'blur',
container: '#firstNameMessage',
validators: {
notEmpty: {
message: 'You cant leave this empty'
},
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'Firstname can only consist alphabets'
},
different: {
field: 'lastname',
message: 'Firstname & lastname can\'t be the same'
}
}
},
lastname: {
trigger: 'blur',
container: '.lastNameMessage',
validators: {
notEmpty: {
message: 'You cant leave this empty'
},
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'Lastname can only consist alphabets'
},
different: {
field: 'firstname',
message: 'Firstname & Lastname can\'t be the same'
}
}
},
emailadd: {
trigger: 'blur',
container: '#emailaddMessage',
validators: {
notEmpty: {
message: 'Email address is required'
},
regexp: {
regexp: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
message: 'Please enter a valid email address'
}
}
},
contactno:{
trigger: 'blur',
container: '#contactnoMessage',
validators: {
notEmpty: {
message: 'Mobile number is required'
}
},
regexp: {
regexp: /^([7-9]{1})([0-9]{9})$/,
message: 'Please enter a valid mobile number'
}
},
password: {
trigger: 'blur',
container: '#passwordMessage',
validators: {
notEmpty: {
message: 'You cant leave this empty'
},
}
},
birthdate: {
trigger: 'blur',
container: '#dob_dayMessage',
container: '#dob_monthMessage',
container: '#dob_yearMessage',
validators: {
notEmpty: {
message: 'Please select your choice'
}
}
},
gender: {
trigger: 'blur',
container: '#genderMessage',
validators: {
notEmpty: {
message: 'Please select your choice'
} // notEmpty
} // validators
}, // gender
}
});
});
</script>
<!-- regexp: regexp: /^\s*((31([-/ ])((0?[13578])|(1[02]))\3(\d\d)?\d\d)|((([012]?[1-9])|([123]0))([-/ ])((0?[13-9])|(1[0-2]))\12(\d\d)?\d\d)|(((2[0-8])|(1[0-9])|(0?[1-9]))([-/ ])0?2\22(\d\d)?\d\d)|(29([-/ ])0?2\25(((\d\d)?(([2468][048])|([13579][26])|(0[48])))|((([02468][048])|([13579][26]))00))))\s*$/, -->
</body>
stylesheet.css中
html, body, div, span,
h1, h2, h3, h4, h5, h6,
i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
}
@media screen and (min-width: 1200px) {
body { font-size: 11px; }
button, input, select, textarea { font-size: 11px; }
}
/* ---- LOGO ---- */
.navbar-header {
margin-left:0px !important;
margin-top: 5px;
}
.form-group {
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #D3D8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D3D8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #D3D8E8 100%);
background-repeat: no-repeat;
background-attachment: fixed;
max-width: 100%;
}
legend{
color:#141823;
font-size:25px;
font-weight:bold;
}
button :hover {
background-color: #79bc64;
background-image: -webkit-linear-gradient(top, #79bc64, #5e7056);
background-image: -moz-linear-gradient(top, #79bc64, #5e7056);
background-image: -ms-linear-gradient(top, #79bc64, #5e7056);
background-image: -o-linear-gradient(top, #79bc64, #5e7056);
background-image: linear-gradient(to bottom, #79bc64, #5e7056);
text-decoration: none;
}
.form-horizontal .btn .btn-primary{
background-color: #79bc64;
background-image: -webkit-linear-gradient(top, #79bc64, #578843);
background-image: -moz-linear-gradient(top, #79bc64, #578843);
background-image: -ms-linear-gradient(top, #79bc64, #578843);
background-image: -o-linear-gradient(top, #79bc64, #578843);
background-image: linear-gradient(to bottom, #79bc64, #578843);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 0px 1px 0px #898a88;
-webkit-box-shadow: 0px 0px 0px #a4e388;
-moz-box-shadow: 0px 0px 0px #a4e388;
box-shadow: 0px 0px 0px #a4e388;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #3b6e22 1px;
text-decoration: none;
}
/* BODY IMAGE CONTROL */
.img-responsive {
margin: 0 auto;
margin-top: 80px;
}
.form .form-control { margin-bottom: 10px; } */
@media (min-width:768px) {
#home{
margin-top:50px;
}
#home .slogan{
color: #0e385f;
color: #0eee5f
line-height: 0px;
font-weight:bold;
}
}
.form-horizontal {
float:right;
padding-top: 10px;
padding-bottom: 2px;
}
.control-label {
text-align:left !important;
}
.panel-body {
float:justify;
}
.form-control:focus {
border-color: green;
box-shadow: inset 0 1px 1px rgba(0, 255, 0, 0.075), 0 0 8px rgba(0, 255, 0, 0.3);
}
/* error-message font-size */
.help-block{
font-size:14px;
}
答案 0 :(得分：1)
你想要什么，可以通过使用Angularjs和Bootstrap来完成， 这是一个演示：
<!DOCTYPE html>
<html>
<head>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form </title>
<style>
/* Styles go here */
body {
padding: 10px;
}
.form-group .help-block {
display: none;
}
.form-group.has-error .help-block {
display: block;
}
</style>
</head>
<body ng-app="app" ng-controller="NewUserController">
<form name="userForm" novalidate>
<div class="form-group" show-errors='{showSuccess: true}'>
<label class="control-label">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" name="name" ng-model="user.name" required>
<p class="help-block" ng-if="userForm.name.$error.required">The user's name is required</p>
</div>
<div class="form-group" show-errors='{showSuccess: true}'>
<label class="control-label">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email" ng-model="user.email" required>
<p class="help-block" ng-if="userForm.email.$error.required">The user's email is required</p>
<p class="help-block" ng-if="userForm.email.$error.email">The email address is invalid</p>
</div>
<button type="submit" class="btn btn-info" ng-click="save()">Submit</button>
<button class="btn btn-link" ng-click="reset()">Reset</button>
</form>
<script>
module = angular.module('app', []);
module.directive('showErrors', function ($timeout, showErrorsConfig) {
var getShowSuccess, linkFn;
getShowSuccess = function (options) {
var showSuccess;
showSuccess = showErrorsConfig.showSuccess;
if (options && options.showSuccess != null) {
showSuccess = options.showSuccess;
}
return showSuccess;
};
linkFn = function (scope, el, attrs, formCtrl) {
var blurred, inputEl, inputName, inputNgEl, options, showSuccess, toggleClasses;
blurred = false;
options = scope.$eval(attrs.showErrors);
showSuccess = getShowSuccess(options);
inputEl = el[0].querySelector('[name]');
inputNgEl = angular.element(inputEl);
inputName = inputNgEl.attr('name');
if (!inputName) {
throw 'show-errors element has no child input elements with a \'name\' attribute';
}
inputNgEl.bind('blur', function () {
blurred = true;
return toggleClasses(formCtrl[inputName].$invalid);
});
scope.$watch(function () {
return formCtrl[inputName] && formCtrl[inputName].$invalid;
}, function (invalid) {
if (!blurred) {
return;
}
return toggleClasses(invalid);
});
scope.$on('show-errors-check-validity', function () {
return toggleClasses(formCtrl[inputName].$invalid);
});
scope.$on('show-errors-reset', function () {
return $timeout(function () {
el.removeClass('has-error');
el.removeClass('has-success');
return blurred = false;
}, 0, false);
});
return toggleClasses = function (invalid) {
el.toggleClass('has-error', invalid);
if (showSuccess) {
return el.toggleClass('has-success', !invalid);
}
};
};
return {
restrict: 'A',
require: '^form',
compile: function (elem, attrs) {
if (!elem.hasClass('form-group')) {
throw 'show-errors element does not have the \'form-group\' class';
}
return linkFn;
}
};
}
);
module.provider('showErrorsConfig', function () {
var _showSuccess;
_showSuccess = false;
this.showSuccess = function (showSuccess) {
return _showSuccess = showSuccess;
};
this.$get = function () {
return { showSuccess: _showSuccess };
};
});
module.controller('NewUserController', function($scope) {
$scope.save = function() {
$scope.$broadcast('show-errors-check-validity');
if ($scope.userForm.$valid) {
alert('User saved');
$scope.reset();
}
};
$scope.reset = function() {
$scope.$broadcast('show-errors-reset');
$scope.user = { name: '', email: '' };
}
});
</script>
</body>
</html>
答案 1 :(得分：1)
问题是<div class="form-group"></div>你放在开头
<强> Writing Form
由于BootstrapValidator旨在与您的表单一起使用Bootstrap 必须使用Bootstrap类进行结构化。
如果您的表单不是由Bootstrap类（元素 包含字段和关联标签没有表单组类）， 您将在控制台中看到以下错误：Uncaught RangeError： 超出最大调用堆栈大小
以及您面临的验证的奇怪行为。
最小的例子是每个输入都有自己的form-group类，你不能将所有输入字段放在一个form-group类中。
<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>Email address</label>
<input type="text" class="form-control" name="email" />
</div>
</form>
以下是代码中的working fiddle example，其中前两个输入有自己的form-group类，表单的其余部分都有常见的form-group类，看看差异
到目前为止我尝试使用bootstrapValidator验证DD / MM / YYYY格式的日期
我建议使用引导程序日历插件，这里有一个example来验证date，让用户生活更轻松，而不是创建3个下拉菜单并要求用户选择每个下拉列表值然后验证它。