Phone Number Validation In Html Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of phone number validation in HTML using JavaScript, in HTML today our topic is about how to check a phone number that is valid or not.
This all can be done with the help of JavaScript and html. For this the developer must have the basic knowledge of JavaScript and html also.
We all know that in INDIA, mostly the number starts from 6,7,8,9. Hence, we show you a method with the help of which you are able to check phone number validation.
Step By Step Guide On Phone Number Validation In HTML Using JavaScript :-
Now, here are many ways with the help of which you are able to check the validation of phone number.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<script>
function validate() {
var text = document.getElementById("phonenumber").value;
var regx = /^[6-9]\d{9}$/;
if (regx.test(text))
alert("valid");
else
alert("invalid");
}
</script>
</head>
<body>
<input id="phonenumber" placeholder="phonenumber" type="tel" maxlength="10">
</br></br>
<button onclick="validate()" type="button">Click me to submit</button>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here, css codes are displayed here, which will described in next session.
- Here, the content to be showed on browser’s display is written here. Here, you see that we create a class named as main with some width and height.
- You can customize this according to yourself. After this we create a division whose width is 50% and height you can specify to auto also. After that the main thing here is to add float property with value left.
- In body of html, after the two divisions, we add images in division in which we use half width and float left property. In case of caption, we just add figcaption tag along with image. You can also use span tag in this case. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that with the help of this article we are able to align images side by side with captions also.
I hope this tutorial on phone number validation in HTML using JavaScript helps you and you understand the codes properly.
Hence, according to this we will also give the solution of how to align images and text side by side with caption in case of images.
About Anjali
