我正在使用的 Bootstrap 验证器遇到一个奇怪的问题。这是一个工作 fiddle :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、项目名称和发布日期。一旦我单击提交按钮， Bootstrap 错误类也适用于相邻的字段主管。有什么想法可以防止这种情况发生吗？
最佳答案
终于找到了一种在一行中处理多个表单组的方法。只需在每个输入周围创建一个 div，为其分配一个类，然后在 JS 代码中提及类名。请参阅下面更新的 HTML 和 JS 代码。
HTML 代码
<form class="form-horizontal" id="main-form" role="form" data-toggle="validator"
action="blank.html" method="post">
<!-- Text input -->
<div class="form-group">
<div class="group"> <!-- Added this div surrounding each input -->
<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>
</div>
<div class="group">
<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>
</div>
<!-- Text input -->
<div class="form-group">
<div class="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>
</div>
<div class="group">
<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>
</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>
</form>
JS 代码:
$(document).ready(function() {
$('#main-form').bootstrapValidator({
framework : 'bootstrap',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
inputProjectID : {
group : '.group',
validators : {
notEmpty : {
message : 'The Project ID is required'
}
}
},
inputProjectName : {
group : '.group',
validators : {
notEmpty : {
message : 'The Project Name is required'
}
}
},
inputReleaseDate : {
group : '.group',
validators : {
notEmpty : {
message : 'Please select a Release Date'
},
date : {
format : 'MM/DD/YYYY'
}
}
}
}
});
});
这终于对我有用了! 这是更新后的 fiddle : https://jsfiddle.net/p6jytvLj/7/
关于javascript - 水平表单的 Bootstrap 验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41359219/