Complete Mobile Number Validation In Javascript 2021

Mobile Number Validation In Javascript
Table of Contents

Want to know how to do mobile number validation in javascript. I have a website project that wants to do mobile number validation in javascript. today I will show you how to do mobile number validation in javascript.

This is just mobile number validation in javascript so it will not be long and complex. This is going to be a short guide. I will tell you how to do everything, explanation and I will give you the Javascript code.

Want more coding tutorials like this do check our coding projects page there we have awesome coding projects done you can visit here – Visit coding projects.

Mobile Number Validation In Javascript

As I have told you, this is a simple mobile number validation in javascript, so it will be easy. So let’s see what we want to validate:

  • We want the entered number to be exactly 10 digits.
  • The number should not contain any alphabets, only numbers.
  • The field cannot be empty
  • If any errors show on the screen

So now let’s see step by step 10 digit mobile number validation in javascript so read this guide till the end. If you want more tutorials like this you can check here – W3school HTML.

Add the HTML code

				
					 <form id="form">
        <input type="number" id="number" placeholder="Enter your mobile no">
        <button type="submit">Submit</button>
        <h5 id="message"></h5>
    </form>
				
			

As you can see above there is a form and inside the form, there is an input and a button So first you need to add a form tag and give an id to the form.

				
					 <form id="form"></form>
				
			

Then inside the form add a number input the create an input tag and select the type to number like this and add an id to the input also. Add the required attribute to the input. The number input will only allow numbers to be entered.

				
					<input type="number" id="number" placeholder="Enter your mobile no">
				
			

Now you need to add an h5 tag to show any error messages and also give an id to it. Lastly, you need a button tag to make the button tag type=’submit’.

				
					 <h5 id="message"></h5>
<button type="submit">Submit</button>
				
			

Add the Javascript code

Now we have to add the javascript code to validate the input. Create a javascript file and link in the HTML or if you have any existing file add this code to it. Add the ID name properly according to the tags.

				
					const form = document.getElementById('form')
const number = document.getElementById('number')
const message = document.getElementById('message')

form.addEventListener('submit', function validateMobileNumber(e) {
    e.preventDefault()
    if (number.value.length > 10) {
        message.innerHTML = 'Enter a 10 digit number'
    }
    else if (number.value.length < 10) {
        message.innerHTML = 'Enter a 10 digit number'
    }
    else {
        message.innerHTML = 'Your number is successfully validated'
    }
})
				
			

This was the complete mobile number validation in javascript tutorial. If you want to test or run this code you can use our HTML, CSS, AND JAVASCRIPT COMPILER. Just copy and paste the code into this compiler.

You can watch this tutorial video on youtube on Mobile number validation in javascript if you want a video tutorial you can watch this

I hope I solved your problem from this tutorial:

  • Mobile number validation in javascript
  • Mobile number validation in HTML

This was for today if you want coding guides in HINDI then you can visit our Hindi coding blog here –Hindi coding blog.

Thank you for reading, have a nice day 🙂

Share This Post
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles