10 Digit Mobile Number Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of 10 digit mobile number validation in JavaScript, here we defined form with input tag for collects user phone number and when user clicks submit button it loads function ‘valid()’.
The valid() method checks input of mobile number length and match with defined pattern so we can identify user input easily and throws respective message on screen.
Step By Step Guide On 10 Digit Mobile Number Validation In JavaScript :-
Here we defined two input tags for collects user mobile number and another for create submit button when user clicks this button the valid() method will loads.
In valid() method we declared variable ‘p’ holds ‘/^\d{10}$/’ format it defines only contain numbers and it length 10 and variable ‘val’ holds user entered value then using if condition we checks whether user entered value length is 10 or not.
If its length not 10 means it displays error message otherwise it returns success message.
<!DOCTYPE html>
<html>
<head>
<title>
Mobile Number Validation
</title>
</head>
<body>
<form>
<input type="text" placeholder="Enter Mobile Number" id="pnum" required>
<input type="submit" name="submit" value="Submit" onclick="valid()">
</form>
<script>
function valid()
{
var p=/^\d{10}$/;
var val=document.getElementById('pnum');
if(val.value.length!=10){
alert("Plz Enter 10 Digit Only!!");
}
else{
if(val.value.match(p)){
alert("Submitted Successfully..");
}
else{
alert("Wrong format");
}
}
}
</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 input tag with attributes ‘placeholder,id’ for instruct user what type of input user needs to fill on the input and id attribute used for collects user entered value.
- Another input tag defined with ‘onclick’ event for when user clicks on it loads valid() function.
- In <script> we defined function valid(), here variable ‘p’ holds number pattern and variable ‘val’ holds user entered value. First if checks whether user input length not equal to 10 then it will displays message ‘Plz Enter 10 Digit Only!!’.
- Otherwise it checks whether user entered data match with pattern if matched it displays message ‘Submitted Successfully..’. Otherwise it displays ‘Wrong format’ message.
- 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 mobile number in javascript.
When we executes our program on browser we can see mobile number input fields with button ‘submit’ when user filled input field and clicks submit button it checks users input length and format with defined pattern then respective message will display on webpage with alertbox.
We can also display message on webpage by using ‘innerHTML’ in javascript later we will see about that.
I hope this tutorial on 10 digit mobile number validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
