Code :-
-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery validation plug-in - main demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"> </script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
}
});
});
</script>
<style>
.error{
color: red;
}
.manual-error{
display: none;
}
#signupForm {
width: 670px;
}
</style>
</head>
<body>
<h1 id=""> Demo</h1>
<div id="main">
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<input class="submit" type="submit" value="Submit">
<br/>
<label id="firstname-error" class="error manual-error" for="firstname"></label>
<br/>
<label id="lastname-error" class="error manual-error" for="lastname"></label>
</p>
</fieldset>
</form>
</div>
</body>
</html>
-------------------------
JQUERY Validator | Move Error Messages Anywhere On Web Page
-------------------------------
Subscribe my Channel:-
http://www.youtube.com/user/SanketRooney?sub_confirmation=1
Facebook Page:-
https://www.facebook.com/UnpossibleNS
Twitter Account:-
https://twitter.com/UnpossiblePOG
Blog:-
https://unpossiblepog.blogspot.com/
Website:-
https://unpossiblepog.com/
Gaming Instagram:- (@unpog.gaming)
https://www.instagram.com/unpog.gaming/
-------------------------------
What If I told you that the error messages from JQUERY VALIDATOR can be moved from here to below text field or right next to submit button.
So, here, I have a code which shows an error message.
Below text fields, add BR tag.
Right click on browser, go to inspect elements.
Copy the whole label tag which contains an error.
Paste it below the respective BR tag.
Remove the text inside it.
Add a manual class next to an error class.
Make it hidden by default by using style tag.
And, as you can see, the error is coming below.
You can move error tag anywhere, for example next to a submit button.
You can copy-paste the code from the link given in the description.
Thanks for watching. Like share and subscribe.
