我想全部在一行中(有错误和有成功)
现在，情况是这样的:
我正在使用 BootstrapValidator 和 Bootstrap。 这是我的 HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>基本上，我想全部对齐，只是在 has-success to disappear error div 下面？ 我正在查看 bootstrap.min.css，但似乎一切正常。 同样在 bootstrapValidator.css 中，我有一些对此事没有影响的类。
最佳答案
我认为你应该将表格分成两个 div，在第一个 div 中所有表格 divs ，除了最后一个 div
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
在第二种形式中你需要把这个-
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
这样消息会出现在不同的div中
搜索 divA, divB:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="divA">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
</div>
<div class="divB">
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>关于html - 在 HTML 中删除成功验证时的输入移位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47052856/