错误消息的顺序以反映 Jquery 验证中输入字段的顺序答案

【问题标题】：Order of error messages to reflect the order of input fields in Jquery validation错误消息的顺序以反映 Jquery 验证中输入字段的顺序
【发布时间】：2020-06-07 23:08:20
【问题描述】：

我稍微修改了 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>

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

也许您可以将目标从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>

【讨论】：