Name Validation In JavaScript Only Alphabets
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of name validation in JavaScript only alphabets, here we defined label with name input field and submit button it had onclick event for load nameValid() function when user submit their name and clicks submit button.
Then it checks with defined alphabets pattern for identify whether user entered input valid or not respective message will display on webpage.
Step By Step Guide On Name Validation In JavaScript Only Alphabets :-
Here we defined one label ‘Enter Name’ and one input field for collect user name then submit button with onclick event.
When user clicks on submit it loads ‘nameValid()’ function call within function we collects user name and stored to variable ‘n’ by input field id ‘nm’ and pattern only contain alphabets stored to variable ‘ptrn’.
Using if() condition with match() function we checks user input match with pattern if matched then it will display message ‘Valid Input’ using alert() method, otherwise it will display ‘Invalid Input’ message on webpage.
<!DOCTYPE html>
<html>
<head>
<title>Name Validation</title>
</head>
<body>
<label for="nm">Enter Name</label>
<input type="text" id="nm">
<input type="submit" value="Submit" onclick="nameValid()">
<script>
function nameValid(){
var n=document.getElementById('nm');
var ptrn=/^[A-Za-z]+$/;
if(n.value.match(ptrn)){
alert('Valid Input');}
else{
alert('Invalid Input');
document.getElementById('nm').focus();
}}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined label ‘Enter Name’ using <label> tag then input tag defined with id attribute ‘nm’ and last we defined submit button with onclick event for initialize nameValid() function call when user submit their response.
- In script we defined nameValid() function, here we stored user input to variable ‘n’ and variable ‘ptrn’ holds pattern of alphabets.
- Using if() condition we checks whether user input match with pattern or not if it is true then it display message ‘Valid Input’ on alert box otherwise it display ‘Invalid Input’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to validate name in JavaScript.
When we executes our program on browser we can see one label ‘Enter Name’ with input field for user can provide their name if they provide any numeric value and submitted then it will notify user to that is invalid input otherwise it will display valid input result on webpage.
We can also display error or success message on webpage instead of alert box.
I hope this tutorial on name validation in JavaScript only alphabets helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
