Updated April 19, 2023
Definition of jQuery validate errorplacement
The jQuery validate errorplacement() function is used to customize the placement of an error message. This function is a built-in function in jQuery. These function changes the default behavior of the validation plugin to insert the error label after the input fields. The validation plugin is used to validate HTML forms for HTML input tags.
Syntax –
$( 'form' ).validate( {
rules: { //some rules for the input feilds },
errorPlacement : function( error, element ) {
if ( element.hasClass( 'customError' )) {
// custom error placement
}
else {
element.after( error ); // default error placement
}
}
});Parameters:
- error – This is not an optional parameter. It specifies the error message which will insert or append to display.
- error – This is not an optional parameter. It specifies the HTML element for which we want to display the error message label.
Working of the jQuery validate errorplacement() function
The jQuery validate errorplacement() function accepts two parameters that are the error label message and the element for which the error message to be displayed. Suppose we have a form element in the HTML page that contains name, empid, projectcode input fields, which are required to fill all the inputs, if any one of the inputs is not provided then the error message will be displayed. Suppose we want to display the error message in that input placeholder or field itself, so we can use the statement as an element.attr(“placeholder”, “This field is required”); inside the validate errorplacement function. Now when we click submit button on the page without any entered field then the error message display inside the input field.
Examples
Example of jQuery validate errorplacement() function to show how the validation error message can place to a specific location.
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery validate errorplacement function </title>
<!-- Using the jquery CDN -->
<script src = "https://www.webcodegeeks.com/wp-content/litespeed/localres/ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<!-- Using the jquery validate plugin CDN -->
<script src = "https://www.webcodegeeks.com/wp-content/litespeed/localres/cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> </script>
</head>
<body>
<h3> This an example of validate errorplacement function: </h3>
<form name = "myForm">
<fieldset id = "gender" name = "gender">
<legend> Select Your Gender </legend>
<div id = "radio">
<label title = "Select the Gender of the candicate "> </label>
<label for = "male "> Male </label>
<input type = "radio" id = "male" name = "gender1" value = "male" />
<label for = "female"> Female </label>
<input type = "radio" id = "famale" name = "gender1" value = "female" />
</div> <!-- end radio class-->
</fieldset>
<input type = "submit">
</form>
<script>
var v = $( "form" ).validate({
rules: {
gender1: 'required'
},
errorPlacement:
function( error, element ){
if(element.is( ":radio" )){
// error append here
error.appendTo('#radio');
}
else {
error.insertAfter(element);
}
}
});
</script>
</body>
</html>An output of the above code is –
Once we click on the button without selecting any radio button, the output is –
In the above code, the “form” element contains two “radio” elements for the gender, if non of the button is selected then the error message will be displayed. Next the validate errorplacement() function is used to place the error append to the radio elements as “error.appendTo(‘#radio’);”. So if we click submit button without selecting any gender then the error message display after the “radio” elements.
Example of jQuery validate errorplacement() function to show the placement of error message with highlight function –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery validate errorplacement function </title>
<!-- Using the jquery CDN -->
<script src = "https://www.webcodegeeks.com/wp-content/litespeed/localres/ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<!-- Using the jquery validate plugin CDN -->
<script src = "https://www.webcodegeeks.com/wp-content/litespeed/localres/cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> </script>
<style>
.errorClass{ background : red;}
</style>
</head>
<body>
<h3> This an example of validate errorplacement function: </h3>
<form id = "form_id" action = "" method = "POST" name = "form_id">
First Name : <input type = "text" id = "first_name" class = "required" name = "first_name" placeholder = "" />
<br>
Last Name : <input type = "text" id = "last_name" class = "required" name = "last_name" placeholder = "" />
<br>
Email ID : <input type = "text" id = "email_id" class = "required" name = "email_id" placeholder = "" />
<br>
<input id="" class="" type="submit"> </input>
</form>
<script>
$( "#form_id" ).validate({
errorPlacement: function( error, element ) {
// attrib nameof the field
var n = element.attr("name");
if (n == "first_name")
element.attr("placeholder", "Please enter your first name");
else if (n == "last_name")
element.attr("placeholder", "Please enter your last name");
else if (n == "email_id")
element.attr("placeholder", "Please enter your email id");
},
rules: {
first_name : {
minlength: 6,
required: true
},
last_name : {
minlength: 6,
required: true
},
email_address : {
minlength : 10,
required: true,
email: true
}
},
highlight: function(element) {
// add a class "errorClass" to the element
$(element).addClass('errorClass');
},
unhighlight: function(element) {
// class "errorClass" remove from the element
$(element).removeClass('errorClass');
},
submitHandler: function(form) {
// now submit the form.
}
});
</script>
</body>
</html>An output of the above code is –
Once we click on the “Submit” button without enter any values into the input boxes, the output is –
In the above code, the “form” element contains three “input” elements for the first name, last name, and email id, if any field left blank then the error message will be displayed at the placeholder for the specific element with the highlighted color. Next, the validate errorplacement() function is used to place the error at the placeholder for the specific input element for example first name is “element.attr(“placeholder”, “Please enter your first name”);”. So if we click submit button without entering any input field then the error message will display the placeholder location.
Conclusion
The jQuery validate errorplacement() function is a built-in function, which is used to customize the placement of a validate error message.
Recommended Articles
This is a guide to jQuery validate errorplacement. Here we discuss the definition, working of the jQuery validate errorplacement() along with the example for better understanding. You may also have a look at the following articles to learn more –
