JQuery Validation 不显示正确的消息
Posted
技术标签:
【中文标题】JQuery Validation 不显示正确的消息【英文标题】：JQuery Validation does not show the right message 【发布时间】：2018-06-14 03:35:06 【问题描述】：我正在使用 JQuery 验证插件来验证邮件地址。
rules:
mail_person:
required: true,
email: true
,
messages:
mail_person:
required: "Mail required",
email: "Mail invalid"
,
问题是：如果输入为空，点击提交按钮，报错信息为“需要输入”。 当我开始在邮件输入字段中输入内容时，该消息应更改为“无效邮件”，但事实并非如此。
反之亦然：如果输入无效并且点击了提交按钮，则会出现正确的消息“输入无效”，但在删除输入时不会变为“需要输入”。
这是plunker
【问题讨论】：
【参考方案1】：试试这个代码
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="jquery-validation@1.12.0" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script data-require="jquery-validation@1.12.0" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
$(document).ready(function()
$("#signupForm1").validate(
rules:
mail_person:
required: true,
email: true,
,
messages:
mail_person:
required: "Mail required",
email: "Mail invalid"
,
errorElement: "div",
errorLabelContainer: '.errorTxt',
errorPlacement: function(error, element)
// Add the red unterline to the error element
/* $(element).parent().addClass("validation-error")
// Add the alert
if (!element.parent().next().hasClass('alert alert-danger'))
$('<div class="alert alert-danger" role="alert" style="height: 20px;"> <p class="text-center validation-error-message">' + error.text() + '</p></div>').insertAfter(element.parent());
*/
,
success: function(label, element)
// Remove the error
/* if ($(element).parent().hasClass('validation-error'))
$(element).parent().removeClass("validation-error");
$(element).parent().next().detach();
*/
,
);
);
</script>
</head>
<body>
<form id="signupForm1" role="form" method="post">
<div class="container">
<div class="input-group gap-bottom">
<span class="input-group-addon col-lg-5 col-md-6 col-sm-8 col-6" id="basic-addon3">
<small>mail</small>
</span>
<input class="form-control" id="mail_person" name="mail_person" aria-describedby="basic-addon3w" type="text" data-msg="Please enter your first name"/>
</div>
<div class="errorTxt alert alert-danger" style="display:none;height: 20px;"></div>
</div>
<input id="submitBtn" name="submitBtn" value="click" class="btn btn-warning center btn-block" type="submit" />
</form>
</body>
</html>
这是plunkr
【讨论】：
谢谢。那行得通。但是没有解决方案，我可以在哪里使用errorPlacement？很想将样式和类用于我已经创建的错误。【参考方案2】：验证设置为在字段提交时进行，因此消息将在按下提交时更改。您还可以通过在更改时准确验证该字段来更改该行为，将其添加到您的代码中：
$("#signupForm1").validate().element(':input[name="mail_person"]');
这将在您每次更改（修改）该字段时重新进行验证。更好的是让它模糊而不是改变。
$('input[name="mail_person"]').on('blur', function()
$("#signupForm1").validate().element(':input[name="mail_person"]');
);
因此，每当您离开该字段时，您都会对该字段进行验证。如果您的表单，您还可以扩展它以支持所有字段。
【讨论】：
我真的很感兴趣谁投了反对票，为什么，请告诉我们你的意见！以上是关于JQuery Validation 不显示正确的消息的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Textarea-validation 不起作用
jQuery Validation 突出显示两个字段的一个标签