请帮助我进行验证，我一直在尝试自定义错误消息应显示的位置，但我不能，而且我一直在尝试搜索网络，但似乎我不理解“errorLabelContainer”或validate.js
我有两个输入，姓名和电子邮件。我想控制消息显示的位置而不是在输入标记下
<script>
jQuery(function($) {
$('#form').validate({
errorClass: "errorOne",
rules: {
firstname: {
required: true
},
email: {
required: true
}
},
messages: {
firstname: {
required: 'Please enter name',
errorElement : 'div',
errorLabelContainer: 'errorOne'
},
email: {
required: 'Please enter a valid email address',
errorElement : 'div',
errorLabelContainer: '.errorTwo'
}
}
});
</script><style>
.errorOne{
background: lightgreen;
min-height: 20px;
}
.errorTwo{
background: pink;
min-height: 20px;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
</head>
<body>
<form id="form" method="post" action="">
<div style="border:1px solid red; height: 500px">
<div class="col-md-8">
<label for="firstname">Enter Name:</label>
<input class="form-control" type="text" name="firstname" />
<label for="email">Enter Email:</label>
<input class="form-control" type="text" name="email" /><br>
<input type="submit" class="button" value="Submit" />
</div>
<div class="col-md-4">
<ul>
<li>
<p>The name error must be displayed in the div with class errorOne</p>
<div class="errorOne"></div>
</li>
<li>
<p>The email error must be displayed in the div with class errorTwo</p>
<div class="errorTwo"></div>
</li>
</ul>
</div>
</div>
</form>
</body>
</html>最佳答案
您可以使用errorClass选项来更改错误类别，如下所示:
$('#form').validate({
errorClass: "errorOne", // Now class of '.errorOne' will be used for errors
rules: {
firstname: {
required: true
},
email: {
required: true
}
},
messages: {
firstname: {
errorElement : 'div',
},
email: {
errorElement : 'div',
}
},
});
});
请注意，它是 errorOne，前面没有点。
更新
如果您想向每个输入添加不同的错误类，则在不调整 jQuery Validator 的情况下不可能做到这一点。
实现此目的的更简单方法是仅为该输入 errorElement 定义一个 CSS 类(默认为 label)。
像这样:
input[name='firstname']+label{ color: deeppink; }
input[name='email']+label{ color:pink; }
看看这个 Demo
关于javascript - jQuery 验证错误标签容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43885765/