我已经稍微修改了Jquery Validation中错误消息的位置。如您所见，错误消息显示在一组输入字段的标签下方。但是，通过这种方法，我引入了一个问题，即错误消息的顺序与输入元素的顺序不同。在此示例中，我希望首先显示月份的错误消息，然后显示年份，但是顺序相反。
但是，如果我将insertAfter更改为insertBefore，则顺序得到纠正，但是很明显，错误消息随后插入了标签上方（尽管在视觉上不是这种情况，也不知道为什么）。
我的问题是，是否有一种更简便的方法来对错误消息进行重新排序，以便它们以与输入相同的顺序显示。提前致谢。
$(function() {
$('.form').validate({
errorElement: "span",
errorPlacement: function(error, element) {
var parent = element.closest('.form-group');
var target = parent.find('legend');
error.insertAfter(target);
}
});
$.validator.addClassRules({
"month-validation": {
required: true
},
"year-validation": {
required: true
}
});
});.error {
display: block;
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">
<form action="index.php" class="form">
<div class="form-group">
<fieldset>
<legend>Enter month and year</legend>
<div class="form-row align-items-center">
<div class="col">
<label class="form-hint" for="month">Month</label>
<input type="text" name="month" class="form-control month-validation" id="month" data-msg-required="Enter the month" />
</div>
<div class="col">
<label class="form-hint" for="year">Year</label>
<input type="text" name="year" class="form-control year-validation" id="year" data-msg-required="Enter the year" />
</div>
</div>
</fieldset>
</div>
<input type="submit" class="btn btn-primary">
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
</body>
</html>也许您可以将目标从legend更改为.form-row，所以可以使用insertBefore
$(function() {
$('.form').validate({
errorElement: "span",
errorPlacement: function(error, element) {
var parent = element.closest('.form-group');
var target = parent.find('.form-row');
error.insertBefore(target);
}
});
$.validator.addClassRules({
"month-validation": {
required: true
},
"year-validation": {
required: true
}
});
});.error {
display: block;
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">
<form action="index.php" class="form">
<div class="form-group">
<fieldset>
<legend>Enter month and year</legend>
<div id='errors'></div>
<div class="form-row align-items-center">
<div class="col">
<label class="form-hint" for="month">Month</label>
<input type="text" name="month" class="form-control month-validation" id="month" data-msg-required="Enter the month" />
</div>
<div class="col">
<label class="form-hint" for="year">Year</label>
<input type="text" name="year" class="form-control year-validation" id="year" data-msg-required="Enter the year" />
</div>
</div>
</fieldset>
</div>
<input type="submit" class="btn btn-primary">
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
</body>
</html>