This looks very simply, but I can't figure it out. I'm using the jquery validate plugin. I'm trying to validate <input name=first> and <input name=second> to output the error messages into:
<span id="errNm2"></span> <span id="errNm1"></span>
I already started writing the errorPlacement: which is where you customize your error message location.
How can I put the errors message in those <span>?
$(document).ready(function () {
$('#form').validate({
errorPlacement: function(error, element) {
error.append($('.errorTxt span'));
},
rules,
});
<input type="text" name="first"/>
<input type="text" name="second"/>
<div class="errorTxt">
<span id="errNm2"></span>
<span id="errNm1"></span>
</div>
This question is related to
jquery
html
jquery-validate
JQUERY FORM VALIDATION CUSTOM ERROR MESSAGE
$(document).ready(function(){_x000D_
$("#registration").validate({_x000D_
// Specify validation rules_x000D_
rules: {_x000D_
firstname: "required",_x000D_
lastname: "required",_x000D_
email: {_x000D_
required: true,_x000D_
email: true_x000D_
}, _x000D_
phone: {_x000D_
required: true,_x000D_
digits: true,_x000D_
minlength: 10,_x000D_
maxlength: 10,_x000D_
},_x000D_
password: {_x000D_
required: true,_x000D_
minlength: 5,_x000D_
}_x000D_
},_x000D_
messages: {_x000D_
firstname: {_x000D_
required: "Please enter first name",_x000D_
}, _x000D_
lastname: {_x000D_
required: "Please enter last name",_x000D_
}, _x000D_
phone: {_x000D_
required: "Please enter phone number",_x000D_
digits: "Please enter valid phone number",_x000D_
minlength: "Phone number field accept only 10 digits",_x000D_
maxlength: "Phone number field accept only 10 digits",_x000D_
}, _x000D_
email: {_x000D_
required: "Please enter email address",_x000D_
email: "Please enter a valid email address.",_x000D_
},_x000D_
},_x000D_
_x000D_
});_x000D_
});<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<title>jQuery Form Validation Using validator()</title>_x000D_
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> _x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>_x000D_
<style>_x000D_
.error{_x000D_
color: red;_x000D_
}_x000D_
label,_x000D_
input,_x000D_
button {_x000D_
border: 0;_x000D_
margin-bottom: 3px;_x000D_
display: block;_x000D_
width: 100%;_x000D_
}_x000D_
.common_box_body {_x000D_
padding: 15px;_x000D_
border: 12px solid #28BAA2;_x000D_
border-color: #28BAA2;_x000D_
border-radius: 15px;_x000D_
margin-top: 10px;_x000D_
background: #d4edda;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
<div class="common_box_body test">_x000D_
<h2>Registration</h2>_x000D_
<form action="#" name="registration" id="registration">_x000D_
_x000D_
<label for="firstname">First Name</label>_x000D_
<input type="text" name="firstname" id="firstname" placeholder="John"><br>_x000D_
_x000D_
<label for="lastname">Last Name</label>_x000D_
<input type="text" name="lastname" id="lastname" placeholder="Doe"><br>_x000D_
_x000D_
<label for="phone">Phone</label>_x000D_
<input type="text" name="phone" id="phone" placeholder="8889988899"><br> _x000D_
_x000D_
<label for="email">Email</label>_x000D_
<input type="email" name="email" id="email" placeholder="[email protected]"><br>_x000D_
_x000D_
<label for="password">Password</label>_x000D_
<input type="password" name="password" id="password" placeholder=""><br>_x000D_
_x000D_
<input name="submit" type="submit" id="submit" class="submit" value="Submit">_x000D_
</form>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html> if (e.attr("name") == "firstName" ) {
$("#firstName__validate").text($(error).text());
console.log($(error).html());
}
Try this get text of error object
HTML
<form ... id ="GoogleMapsApiKeyForm">
...
<input name="GoogleMapsAPIKey" type="text" class="form-control" placeholder="Enter Google maps API key" />
....
<span class="text-danger" id="GoogleMapsAPIKey-errorMsg"></span>'
...
<button type="submit" class="btn btn-primary">Save</button>
</form>
Javascript
$(function () {
$("#GoogleMapsApiKeyForm").validate({
rules: {
GoogleMapsAPIKey: {
required: true
}
},
messages: {
GoogleMapsAPIKey: 'Google maps api key is required',
},
errorPlacement: function (error, element) {
if (element.attr("name") == "GoogleMapsAPIKey")
$("#GoogleMapsAPIKey-errorMsg").html(error);
},
submitHandler: function (form) {
// form.submit(); //if you need Ajax submit follow for rest of code below
}
});
//If you want to use ajax
$("#GoogleMapsApiKeyForm").submit(function (e) {
e.preventDefault();
if (!$("#GoogleMapsApiKeyForm").valid())
return;
//Put your ajax call here
});
});
Add this code in your validate method:
errorLabelContainer: '#errors'
and in your html, put simply this where you want to catch the error:
<div id="errors"></div>
All the errors will be held in the div, independently of your input box.
It worked very fine for me.
This Worked for me
Actually error is a array which contain error message and other values for elements we pass, you can console.log(error); and see. Inside if condition "error.appendTo($(element).parents('div').find($('.errorEmail')));" Is nothing but finding html element in code and passing the error message.
$("form[name='contactUs']").validate({
rules: {
message: 'required',
name: "required",
phone_number: {
required: true,
minlength: 10,
maxlength: 10,
number: false
},
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message",
phone_number: "Please enter a valid mobile number"
},
errorPlacement: function(error, element) {
$("#errorText").empty();
if(error[0].htmlFor == 'name')
{
error.appendTo($(element).parents('div').find($('.errorName')));
}
if(error[0].htmlFor == 'email')
{
error.appendTo($(element).parents('div').find($('.errorEmail')));
}
if(error[0].htmlFor == 'phone_number')
{
error.appendTo($(element).parents('div').find($('.errorMobile')));
}
if(error[0].htmlFor == 'message')
{
error.appendTo($(element).parents('div').find($('.errorMessage')));
}
}
});
You can simply create extra conditions which match the fields you require in the same function. For example, using your code above...
$(document).ready(function () {
$('#form').validate({
errorPlacement: function(error, element) {
//Custom position: first name
if (element.attr("name") == "first" ) {
$("#errNm1").text(error);
}
//Custom position: second name
else if (element.attr("name") == "second" ) {
$("#errNm2").text(error);
}
// Default position: if no match is met (other fields)
else {
error.append($('.errorTxt span'));
}
},
rules
});
Hope that helps!
Source: Stackoverflow.com