Please help me with my validate, i have been trying to customize where the error message should display but i can not and i have been trying to search the web but it seems like I do not understand "errorLabelContainer" or validate.js
I have two inputs, Name and Email. I want to control where the message displays instead of under the input tag
<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>You can use errorClass option to change the error class, like this:
$('#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',
}
},
});
});
Note that it's errorOne without a dot in front of it.
UPDATE
If you would like to add different error classes to each input, it is not possible to do so without tweaking jQuery Validator.
An easier way to achieve this would be to define a CSS class for just that input errorElement(label by default).
Like this:
input[name='firstname']+label{ color: deeppink; }
input[name='email']+label{ color:pink; }
Take a look at this Demo