Name Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of name validation in JavaScript, as we are going to learn about form validations, let us assume that we have an input field of type test in html with a button of input type submit.
And we have to apply validation on this input field that it must contains name. So, let us see how to apply validation in JavaScript.
Step By Step Guide On Name Validation In JavaScript :-
One thing to here notice that we can also apply validation on this input field in html.
As we can use required on input field. But the concept is that we want to apply validation using JavaScript. So, let us how to do this.
<!DOCTYPE html>
<html>
<head>
<title>
TalkersCode - JavaScript tutorials
</title>
</head>
<body>
<h1> Validations in JavaScript at TalkersCode </h1>
<h2> Name validation in JavaScript </h2>
<form name="htmlForm" action=" " onsubmit="return validation()" method="post">
<label>
Enter Name here :
</label>
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function validation() {
let result = document.forms["htmlForm"]["fname"].value;
if ( result == "") {
alert("Name is empty here, please fill name");
}
}
</script>
</body>
</html>
// another example
<!DOCTYPE html>
<html>
<head>
<title>
TalkersCode - JavaScript tutorials
</title>
</head>
<body>
<h1> Validations in JavaScript at TalkersCode </h1>
<h2> Name validation in JavaScript </h2>
<form name="htmlForm" action=" "method="post">
<label>
Enter Name here :
</label>
<input type="text" name="fname">
<button onclick=”validation()”>
Submit
</button>
</form>
<script>
function validation() {
let result = document.forms["htmlForm"]["fname"].value;
if ( result == "") {
alert("Name is empty here, please fill name");
}
}
</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.
- Here, as we see that we give two examples. The most used way first way. As, both the examples are mostly same. Only the one difference is that.
- In first form, we apply use JavaScript using Form tag whereas the button used here is input button of type submit.
- At next, we see that we did not apply validation using form. We Call our JavaScript function using onclick attribute on button.
- At last, the validation applied to name is that. If the field in which we have to fill the name is empty then it will show a popup or say alert to fill the name and redirection of form is stopped whereas if everything is ok then it does not show us any error. We hope you understand the above code easily with the help of these steps.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to apply name validation in JavaScript.
I hope this tutorial on name validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
