Press enter to see results or esc to cancel.


Javascript Form Validation-Mobile Number,Email HTML


In this video I have shown how you can validate a simple HTML form using javascript with the help of PHP front end.
The form is with email and mobile validation also.
The PHP page is run with the help of XAMPP Server. Please go to my videos to get how to install XAMPP server in Windows PC.

index.php

<html>
<head>
<script type="text/javascript">
function validate() {
 var name = document.forms["myform"]["name"].value;
 if(name==""){
 alert("Please enter the name");
 return false;
 }
 var email = document.forms["myform"]["email"].value;
 if(email==""){
 alert("Please enter the email");
 return false;
 }else{
 var re = /^(?:[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
 var x=re.test(email);
 if(x){
 }else{
 alert("Email id not in correct format");
 return false;
 } 
 } 
 var mobile = document.forms["myform"]["mobile"].value;
 if(mobile==""){
 alert("Please enter the mobile");
 return false;
 }else{
 if(isNaN(mobile)){
 alert("Mobile number not valid");
 return false;
 }
 } 
 var address = document.forms["myform"]["address"].value;
 if(address==""){
 alert("Please enter the address");
 return false;
 }
}
</script>
</head>
<body>
<center>
<h1>Java Script Form validation Test</h1>
<h3>Sign Up Form</h3>
<form name="myform" action="welcome.php" onsubmit="return validate()" method="post">
Name : <input type="text" name="name"/><br>
Email : <input type="text" name="email"/><br>
Mobile : <input type="text" name="mobile"/><br>
Address : <textarea name="address"></textarea><br>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>

welcome.php

<h1>Welcome</h1>
Name : <?php echo $_POST["name"]; ?><br>
Email : <?php echo $_POST["email"]; ?><br>
Mobile : <?php echo $_POST["mobile"]; ?><br>
Address : <?php echo $_POST["address"]; ?><br>

index.php after running on server

Some of the validation message,
1. Enter Name

2. Enter email

3. Email ID not Correct

4. Mobile Number Not valid

welcome.php After submitting all form data.