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;
});

应该是

// We can fetch the text from the correct field by searching the inputs with the 'for' attribute
$.each(requiredFields, function (_, value) {
  let _label = $(`label[for=${value}]`).text().trim();
  messages[value] = prefix + _label;
});

---

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

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

 
messages = requiredFields.reduce((acc, label) => {
  let text = $(`label[for=${label}]`).text().trim();
  acc[label] = prefix + text;
  return acc;
}, {});

$("#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>