javascript - jQuery 验证 : display validation messages that contain field name?

Question

我有很多必填字段需要验证，我想以这种格式显示警告消息:“请填写”+字段标签。我知道我可以像这样手动完成:

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