jQuery验证:显示包含字段名的验证消息？

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>

​