【发布时间】：2017-05-12 13:40:25
【问题描述】：
我正在使用的 Bootstrap Validator 遇到一个奇怪的问题。这是一个有效的小提琴：https://jsfiddle.net/p6jytvLj/ 注意：调整输出窗口大小以查看实际表单。
HTML 代码
<form class="form-horizontal" id="main-form" role="form" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text"
placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text"
placeholder="Select Release Date" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc"
name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success" form="main-form" data-toggle="tooltip"
title="Click to submit this form" onclick="submitForms()">Submit</button>
</form>
JS
$(document).ready(function() {
$('#main-form').bootstrapValidator({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
inputProjectID: {
row: 'col-md-3',
validators: {
notEmpty: {
message: 'The Project ID is required'
}
}
},
inputProjectName: {
row: 'col-md-3',
validators: {
notEmpty: {
message: 'The Project Name is required'
}
}
},
inputReleaseDate: {
validators: {
notEmpty: {
message: 'Please select a Release Date'
}
}
}
}
});
});
我面临的问题是我只对前 3 个字段进行设置验证，即项目 ID、项目名称和发布日期。一旦我单击提交按钮，引导错误类也适用于相邻的字段主管。任何想法如何防止这种情况发生？
【问题讨论】：
-
在 Supervisor 输入字段中添加另一个类并设置默认边框颜色
标签： javascript jquery html twitter-bootstrap validation