JavaScript Form Validation With Error Message
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of JavaScript form validation with error message, one thing to keep in notice that we already cover the concept of form validation in JavaScript.
And this article is minor different from that because with help of these codes we are also able to alert messages when an error occurs.
So, let us see how to apply validation on forms with error message in JavaScript.
Step By Step Guide On JavaScript Form Validation With Error Message :-
Here, in JavaScript mainly there are two ways to show error message.
In first, we can use alert to show error messages and another one is with the help of inner html in which we display a line that an error has occurred.
Both are convenient ways and depend upon how you use them. Now, let us see how to apply validation with message with help of alerts.
In next session we will show you an example of error messages using inner html.
<html>
<head>
<title>
JavaScript Validations
</title>
</head>
<body>
<h1>
TalkersCode – JavaScript validation
</h1>
<h2>
How to validate username and password in JavaScript
</h2>
<form id="registrationForm" method="post" name="form">
<label> Enter your username: </label>
<input type="text" name="username" id="username">
<label> Enter your email: </label>
<input type='text' name='email'/>
<label> Enter your password: </label>
<input type="password" name="password" id="password">
<input type="submitBtn" value="Registration" id="submitBtn">
<input type="reset" value="Reset">
</form>
<script>
$('#registrationForm').submitBtn(function(e) {
e.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
var email= $('email).val();
if(password == ""){
alert("Please enter a Password here to continue");
$('#password').focus();
return false;
}
if(password.value.length < 8){
alert("Please enter greater than 6 characters inside password. ");
$('#password').focus();
return false;
}
if(username == ""){
alert("Please enter a Username here to continue");
$('#username').focus();
return false;
}
if(email == ""){
alert("Please enter a email address here to continue");
$('email).focus();
return false;
}
if(username != '' && password != ''&& email!= '') {
alert(" Congratulations! You are now an authenticated user ");
return true;
}
});
</script>
</body>
</html>
- Here, above we show you an example in JavaScript.
- For this first of all we here create a basic structure of html. For this we use html, head, title and body with script tag. We hope you know about the basic structure of html and which html tag is used for which concept.
- Now, when we look inside body tag. Here, we see some headings tag and a script tag. Heading tag again is a concept of html, whereas script relates to JavaScript.
- JavaScript is written always inside script tag. Where script is a paired tag so it also has a closing tag. Now inside these script tag, we write our JavaScript code.
- Here, as we see that we create a basic registration form on which we are going to apply validations with error messages. Here, we use our three fields that are email, username and password with a button to submit that form.
- After this let us see our JavaScript function that is written inside script tag and comes into response when we trying to submit our form.
- Here, as you see we apply our basic validations in which if any thing remains empty at the time of submission of form and password is less than 8 characters than it will focus that thing and shows an alert message related to error.
- With help of these codes, we are able to apply create error messages in JavaScript.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand how to apply validation on forms with error messages in JavaScript.
I hope this tutorial on JavaScript form validation with error message helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
