Mobile Number Validation Form in JavaScript
In this example we have created a Mobile Number Validation Form that displays the Mobile Number, Phone No. and email id entered by the user. We have used Java Script to validate the Mobile Number to 10 digits and Phone Number to 10 Digits. We have also used Java Script to get the valued entered in the form and displayed it as the user clicks Submit button. If a programmer enters a wrong phone number or mobile number or enters email-id in a different format, it shows an error message and asks the user the correct phone number and email-id.
Here is the code of Mobile Number Validation Form:
<html>
<head>
<script type="text/javascript">
function validate()
{
if( document.mobilenumbervalidation.mobileno.value == "" ||
isNaN( document.mobilenumbervalidation.mobileno.value) ||
document.mobilenumbervalidation.mobileno.value.length != 10 )
{
alert( "Please provide a Mobile No in the format 123." );
document.mobilenumbervalidation.mobileno.focus() ;
return false;
}
if( document.mobilenumbervalidation.phoneno.value == "" ||
isNaN( document.mobilenumbervalidation.phoneno.value) ||
document.mobilenumbervalidation.phoneno.value.length != 10 )
{
alert( "Please provide a Phone No in the format 123." );
document.mobilenumbervalidation.phoneno.focus() ;
return false;
}
var email = document.mobilenumbervalidation.email_id.value;
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID");
document.mobilenumbervalidation.email_id.focus() ;
return false;
}
return( true );
}
</script>
</head>
<br/>
<h2 align="center">Mobile Number validation Form</h2>
<form method="get" action="show.html" name="mobilenumbervalidation" onsubmit="return(validate());">
<table border="1" bgcolor="#585858" width="20%" align="center">
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td>Phone No</td>
<td><input type="text" name="phoneno" id="phoneno" size="30"></td>
</tr>
<tr>
<td>Email_id</td>
<td><input type="text" name="email_id" id="email_id" size="30"></td>
</tr>
<tr>
<td></td>
<td align="center"><input type="submit" value="submit"></td>
</tr>
</table>
</form>
</html>
Code to display the values entered in the Mobile Number Validation form:
<html>
<script LANGUAGE="JavaScript">
function getParams() {
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx + 1, document.URL.length)
.split('&');
for ( var i = 0; i < pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
params = getParams();
mobileno = (params["mobileno"]);
phoneno = unescape(params["phoneno"]);
email_id = unescape(params["email_id"]);
document.write("mobileno = " + mobileno + "<br>");
document.write("phoneno = " + phoneno + "<br>");
document.write("email_id = " + email_id+ "<br>");
</script>
</html>
When you execute this program then output will be as follows:
After clicking on submit button then "show.html" will display the details as shown below:
