Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to implement US Mobile Number validation using JavaScript.
US Mobile Number will be entered in the TextBox by the user and it will be validate on the click of Button by using Regular Expression (Regex) in JavaScript.
Code for HTML Page
On the HTML page there i will place Textbox control for entering the US Mobile Number by the user. Here I will also place the control named span to show the message or error message. Here I will also place the control named button, on the click of button validation_usmobile function will be called to check the valid US Mobile number entered by the user.
<input name="txt_mobile" type="text" id="txt_usmobile" />
<span id="lbl_mobile" class="error"> </span>
<br /><br />
<input type="button" id="btn_Submit" value="Submit" onclick="ValidationUSmobile()" />
Validate US Mobile Number using JavaScript
On the onclick event of the button a function named ValidateUSmobile() will be called. First, the US Mobile Number entered by the user will be send to the function and then its value will be validating using a Regular Expression. If the entered US Mobile Number format is incorrect then the Error Message will be displayed in SPAN.
Validation of US Mobile Number using Regular Expression in JavaScript
When the Submit Button is clicked, the ValidateUSMobile JavaScript function will be worked.Inside the ValidateUSMobile JavaScript function, the Mobile Number TextBox is referenced and its value is tested using a Regular Expression.
The following conditions must satisfy for a US Mobile Number to be termed as valid.
1. US Mobile Number should be 10 digits long.
2. US Mobile Number may begin with an optional (.
3. After the optional (, it must be 3 digits. If it does not have a (, it must start with 3 digits.
4. US Mobile Number can have an optional) after first 3 digits.
5. US Mobile Number can have an optional hyphen (-) or empty space after ), if present or after first 3 digits.
6. Then there must be 3 more digits.
7. After second set of 3 digits, it can have another optional hyphen (-) or empty
space.
8. Finally, it must end with four digits.
Valid examples: (408)-256-8952, 408-256-8952, 40825-68952, 4082568952, (408) 256 8952, 408 256 8952, 408256 8952
<script type="text/javascript">
function ValidateUSMobile() {
var mobileNumber = document.getElementById("txt_USmobile").value;
var lblError = document.getElementById("lbl_mobile");
lblError.innerHTML = "";
var expr = /^(\([0-9]{3}\)|[0-9]{3})[\s\-]?[\0-9]{3}[\s\-]?[0-9]{4}$/;
if (!expr.test(mobileNumber)) {
lblError.innerHTML = "Invalid Mobile Number.";
}
}
</script>
Here i am giving the complete code for HTML page. You can copy and paste the code on your HTML page and enjoy the execution of the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
.error { color: Red; }
</style>
</head>
<body>
Mobile Number:
<input type="text" id="txt_mobile" />
<span id="lbl_Error" class="error"></span>
<br /><br /><br />
<input type="button" value="Submit" onclick="ValidateUSMobile()" />
<script type="text/javascript">
function ValidateUSMobile() {
var mobileNumber = document.getElementById("txt_mobile").value;
var lblError = document.getElementById("lbl_Error");
lblError.innerHTML = "";
var expr = /^(\([0-9]{3}\)|[0-9]{3})[\s\-]?[\0-9]{3}[\s\-]?[0-9]{4}$/;
if (!expr.test(mobileNumber)) {
lblError.innerHTML = "Invalid Mobile Number.";
}
else
{
lblError.innerHTML = "Valid Mobile Number.";
}
}
</script>
</body>
</html>
Conclusion: In above code, I explained that how to implement US Mobile Number validation using JavaScript. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Regards
Using Asp.net
No comments:
Post a Comment