jQuery 验证 errorLabelContainer答案

【问题标题】：jQuery Validate errorLabelContainerjQuery 验证 errorLabelContainer
【发布时间】：2017-10-08 16:56:49
【问题描述】：

请帮助我进行验证，我一直在尝试自定义错误消息的显示位置，但我不能，我一直在尝试搜索网络，但似乎我不理解“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>

【问题讨论】：

标签： javascript jquery html formvalidation-plugin

【解决方案1】：

您可以使用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（默认为label）定义一个 CSS 类。

像这样：

input[name='firstname']+label{ color: deeppink; }

input[name='email']+label{ color:pink; }

看看这个Demo

【讨论】：

嗨，我可以请你再看看我的问题。基本上，我有两列，一列有表单，另一列有两个 div 来显示自定义错误消息。
@ThandoHlophe 更新了我的答案:)
@ThandoHlophe 或者您正在寻找this
好的，我知道了，我会试试这个。非常感谢