jQuery-validate：根据字段标签显示警报消息？

Question

我有许多必填字段需要验证，我想以以下格式显示警报消息：“请填写” + field label。我知道我可以这样手动进行：

$("#myform").validate({
  rules: {
    Forename: "required",
    Middlename: "required",
    Lastname: "required"
  },
  messages: {
    Forename: "Please fill in Forename",
    Middlename: "Please fil in Middle name",
    Lastname: "Please fill in Last name"
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>


<form id="myform">
  <div>
  <label for="Forename">Forename </label>
  <input type="text" id="Forename" name="Forename">
  </div>
  <div>
  <label for="Middlename">Middle name </label>
  <input type="text" id="Middlename" name="Middlename">
  </div>
  <div>
  <label for="Lastname">Last name </label>
  <input type="text" id="Lastname" name="Lastname">
  </div>
  <input type="submit" value="Search">
</form>

这对于很多字段来说都可以，但是对于很多字段来说也可以重复。我试图简化这样的解决方案：

var labelName = $("label").text(),
    requiredFields = ["Forename", "Middlename", "Lastname"],
    messages = {},
    prefix = "Please fill in ";

$.each(requiredFields, function (_, value) {
  messages[value] = prefix + labelName;
});

$("#myform").validate({
  rules: {
    Forename: "required",
    Middlename: "required",
    Lastname: "required"
  },
  messages: messages
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>


<form id="myform">
  <div>
    <label for="Forename">Forename </label>
    <input type="text" id="Forename" name="Forename">
  </div>
  <div>
    <label for="Middlename">Middle name </label>
    <input type="text" id="Middlename" name="Middlename">
  </div>
  <div>
    <label for="Lastname">Last name </label>
    <input type="text" id="Lastname" name="Lastname">
  </div>
  <input type="submit" value="Search">
</form>

但是有一个问题：消息中的标签没有更新，它们是相同的，问题是：如何使它动态地更改为每个字段的标签名称？

Answer 1

如果要保留当前方法，只需切换使用的变量

// labelName is $("label").text() - Which is the concatinated string of *all* labels
$.each(requiredFields, function (_, value) {
  messages[value] = prefix + labelName;
});

应该是

// By using value, we simply pull the string from the requiredFields Array
$.each(requiredFields, function (_, value) {
  messages[value] = prefix + value;
});

---

另一种方法是使用.reduce()。我们可以通过简单地循环遍历requiredFields数组]来创建对象

var labelName = $("label").text(),
    requiredFields = ["Forename", "Middlename", "Lastname"],
    messages = {},
    prefix = "Please fill in ";

 
messages = requiredFields.reduce(
  (acc, label) => ({...acc, [label]: prefix + label})
, {});

$("#myform").validate({
  rules: {
    Forename: "required",
    Middlename: "required",
    Lastname: "required"
  },
  messages: messages
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>


<form id="myform">
  <div>
    <label for="Forename">Forename </label>
    <input type="text" id="Forename" name="Forename">
  </div>
  <div>
    <label for="Middlename">Middle name </label>
    <input type="text" id="Middlename" name="Middlename">
  </div>
  <div>
    <label for="Lastname">Last name </label>
    <input type="text" id="Lastname" name="Lastname">
  </div>
  <input type="submit" value="Search">
</form>