Registration Form Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you registration form validation in JavaScript, as we already know that after successful registration the user use these credentials for login and for this purpose our data have to save inside database.
Hence, a developer must to ensure that the data saved in database for specific purpose may be validation means that the data of all the user must be in same manner, so it become easy to understand.
So, today we will understand how to apply validations on registration form using JavaScript.
Step By Step Guide On Registration Form Validation In JavaScript :-
Here, as we already say that the data used for registration must be validated.
There are many purposes behind that one more purposes is for security reasons so that our data must be secured.
So, with the help of example we will understand how to apply validation on registration form using JavaScript.
<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(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 login form in which we create one field for user name, one for password and one last for email with a button of registration and reset.
- After that we write our JavaScript codes. In which we see that when any one thing from our above fields is empty then our page will show an error to fill that field. Whereas another side if our all fields are filled and validated then it will show use an alert with a message of congratulations.
- As, one thing more that we show only basic things here that is we can also use phone number, confirm password and many other fields.
- And one last thing is that there are many types of validation which we can use, here in this tutorial we use only alert on blank field validation, we can also apply validation on data that is our email and username is valid or not, is our password is strong or another and many another thing. We will discuss all these things one by one in next sessions.
- One thing to note here that we did not redirect user to another page on successful login case, but we hope you easily understand the concept of validation.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand how to use validations on registration form using JavaScript.
I hope this article on registration form validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
