javascript - jQuery Validate:显示包含字段名称的验证消息?
问题描述
我有许多必填字段需要验证,我想以这种格式显示警报消息:“请填写”+ 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>
但是有一个问题:消息中的标签没有更新,它们是相同的,问题是:如何使其动态更改为每个字段的标签名称?
解决方案
如果您想保留当前的方法...
// 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>
推荐阅读
- r - 崇高:从光标运行脚本直到开始脚本没有选择行
- python - 如何使用 Python 从 .csv 文件中获取行和上一行?
- python - opencv python 在表格有空隙的地方添加网格线
- ios - 使用 Storyboard 为 Objective-C iOS 应用程序增色
- r - 初始化图形设备时如何设置设备复制参数?
- python - 我的 Python 代码总是显示属性错误
- javascript - 如何在html表格的每一行添加图标按钮?
- php - 在数组上尝试访问 php 7.4 中 bool 类型值的数组偏移量
- informatica - 转换 CLM_DATA 上不允许串联。主动变换(RTR.T_GRP,RTR.B_GRP)
- c# - 将 BGRA 8 位十六进制字符串转换为 System.Drawing.Color