私は自分の Web アプリで BootStrapValidator を使用していますが、なんらかの理由でフィードバック アイコンが入力フィールドに配置されておらず、入力フィールドの下に配置されています。入力フィールドとfeedbackIconsが下に配置されているため、レイアウトが崩れています
これが現在の外観の写真です
これは、feedbackIcons の表示方法の例です。
ここに私のマークアップがあります
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
.max-size {
max-width: 100%;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: white;
background-color: #347AB6;
}
.panel-heading {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.panel {
border-radius: 0px;
}
</style>
<link href="~/Content/bootstrapValidator.min.css" rel="stylesheet" />
</head>
<body>
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active"><a href="#CustomerData" data-toggle="tab">Customer Data</a></li>
<li><a href="#SubDivisionAssignment" data-toggle="tab">SubDivision Assignment</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="CustomerData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Customer</strong></div>
<div class="panel-body">
<div class="col-md-6">
<fieldset class="Myfieldset">
<legend class="Mylegend"><h4><b>Address</b></h4></legend>
<div class="form-group">
<label for="txtCustomerFirstName" class="control-label col-md-2" id="lblCustomerFirstName"><b>First Name</b></label>
<div class="col-md-10">
<input id="txtCustomerFirstName" type="text" class="form-control max-size" name="firstname" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerLastName" class="control-label col-md-2" id="lblCustomerLastName"><b>Last Name</b></label>
<div class="col-md-10">
<input id="txtCustomerLastName" type="text" class="form-control max-size" name="lastname" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerAddress1" class="control-label col-md-2" id="lblCustomerAddress1">Address</label>
<div class="col-md-10">
<input id="txtCustomerAddress1" type="text" class="form-control max-size" name="address" />
</div>
</div>
<div class="form-group">
<label for="CustomertxtAddress2" class="control-label col-md-2" id="lblCustomerAddress2">Address2</label>
<div class="col-md-10">
<input id="txtCustomerAddress2" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerCity" class="control-label col-md-2" id="lblCustomerCity">City</label>
<div class="col-md-4">
<input id="txtCustomerCity" type="text" class="form-control max-size" name="city" />
</div>
<label for="txtCustomerCounty" class="control-label col-md-2" id="lblCustomerCounty">County</label>
<div class="col-md-4">
<input id="txtCustomerCounty" type="text" class="form-control" name="County" />
</div>
</div>
<div class="form-group">
<label for="acState" class="control-label col-md-2" id="lblCustomerState"><b>State</b></label>
<div class="col-md-4">
<select id="acState" class="form-control" name="state"></select>
</div>
<label for="txtCustomerZip" class="control-label col-md-2" id="lblCustomerZip">Zip/Postal</label>
<div class="col-md-4">
<input id="txtCustomerZip" type="text" class="form-control" name="zip" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerYearBuilt" class="control-label col-md-2" id="lblCustomerYearBuilt">Year Built</label>
<div class="col-md-10">
<input id="txtCustomerYearBuilt" type="text" class="form-control max-size" name="yearbuilt" />
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="Myfieldset">
<legend class="Mylegend"><h4><b>Contact</b></h4></legend>
<div class="form-group">
<label for="txtCustomerContact" class="control-label col-md-2" id="lblCustomerContact">Contact</label>
<div class="col-md-10">
<input id="txtCustomerContact" type="text" class="form-control max-size" name="customercontact" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerEmail" class="control-label col-md-2" id="lblAdministrationModeratorEmail"><b>Email</b></label>
<div class="col-md-10">
<input id="txtCustomerEmail" type="text" class="form-control max-size" name="email" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2" id="lblCustomerPhone">Phone</label>
<div class="col-md-10">
<input id="txtPhone" type="text" class="form-control max-size" name="phone" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerFax" class="control-label col-md-2" id="lblCustomerFax">Fax</label>
<div class="col-md-10">
<input id="txtCustomerFax" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerMobile" class="control-label col-md-2" id="lblCustomerMobile">Mobile</label>
<div class="col-md-10">
<input id="txtCustomerMobile" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerOther" class="control-label col-md-2" id="lblCustomerOther">Other</label>
<div class="col-md-10">
<input id="txtCustomerOther" type="text" class="form-control max-size" />
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="SubDivisionAssignment">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit SubDivision Assignment</strong></div>
<div class="panel-body">
Off
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<button id="btnSave" type="button" class="btn btn-primary pull-right">Save</button>
</div>
</div>
<script src="~/Scripts/Customjs/Customer/CustomerEditorJS.js"></script>
</body>
</html>
ここに私のBootstrapValidatorコードがあります
function ValidateCustomer(){
var validator = $("#CustomerData").bootstrapValidator({
excluded: ':disabled',
container: 'tooltip',
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields: {
firstname: {
message: "First Name is required",
validators: {
notEmpty: {
message: "Please add First Name"
}
}
},
lastname: {
message: "Last Name is required",
validators: {
notEmpty: {
message: "Please add Last Name"
}
}
},
address: {
message: "Address is required",
validators: {
notEmpty: {
message: "Please add Address"
}
}
},
city: {
message: "City is required",
validators: {
notEmpty: {
message: "Please add City"
}
}
},
zip: {
message: "ZipCode is required",
validators: {
notEmpty: {
message: "Please add ZipCode"
}
}
},
city: {
message: "City is required",
validators: {
notEmpty: {
message: "Please add City"
}
}
},
state: {
message: "State is required",
validators: {
notEmpty: {
message: "Please add State"
}
}
},
yearbuilt: {
message: "Year Built is required",
validators: {
notEmpty: {
message: "Please add Year Built"
}
}
},
phone: {
message: "Phone is required",
validators: {
notEmpty: {
message: "Please add Phone"
}
}
},
email: {
message: "Email address is required",
validators: {
notEmpty: {
message: "Please provide Email address"
},
emailAddress: {
message: "Email address was invalid"
}
}
},
customercontact: {
message: "Contact name is required",
validators: {
notEmpty: {
message: "Please add Contact name"
}
}
}
},
});
}