In this tutorial I will show you contact form validation in your web application using JavaScript. A simple contact form submits with Name, Email, Phone number and some Description into database. Before submit record into MySQL table it check the input text is valid or not using JavaScript.
Name Validation:
If name input field is blank then it show a message and will tell the user put some value here.
Email Validation:
User not submit empty field into the database and if user set wrong email address, then it show a wrong message to user.
Phone Number Validation:
Blank field cannot insert, it show a alert message and if user can’t not put the decimal value in the text box, the is alert to user for put the decimal value into the text box.
Description Validation:
A user submit some description, if description input box is empty, it can’t insert the records into the database and show a message.
Follow the example and source code and try in your web application.
<!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 cont-for"> <h2 align="center">Quick Contact</h2> <p class="quick_con"></p> <form method="post" name="myform" onsubmit="return validateform()"> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label for="name">Name:</label> <span id="namErr" style="color: red"></span> <input type="text" class="form-control" name="name" id="name" > </div> <div class="form-group"> <label for="email">Email:</label> <span id="emErr" style="color: red"></span> <input type="text" class="form-control" name="email" id="email" > </div> </div> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label for="phone">Phone:</label> <span id="phErr" style="color: red"></span> <input type="text" class="form-control" name="phone" id="phone" > </div> <div class="form-group"> <label for="Description">Description:</label> <span id="decErr" style="color: red"></span> <textarea name="description" id="description"></textarea> </div> </div> <div class="col-md-12 col-sm-12"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit"> </div> </form> </div> </div> <p> </p> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" onclick="location.reload();" data-dismiss="modal">×</button> <h4 class="modal-title">Contact Us</h4> </div> <div class="modal-body"> <p>Data Submit Successfully</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" onclick="location.reload();" data-dismiss="modal">Ok</button> </div> </div> </div> </div> <script type="text/javascript"> function validateform(){ //alert("ok"); die; //var name=document.myform.name.value; var name=document.getElementById('name').value; if(name==""){ document.getElementById('namErr').innerHTML="Field Is Empty!!"; return false; }else{ document.getElementById('namErr').innerHTML=""; var phone=document.myform.phone.value; if(phone==""){ document.getElementById('phErr').innerHTML="Field is Empty!!"; return false; }else{ if(isNaN(phone)){ document.getElementById('phErr').innerHTML=""; document.getElementById('phErr').innerHTML="Please Input Number!!"; return false; }else{ document.getElementById('phErr').innerHTML=""; var email=document.myform.email.value; if(email==""){ document.getElementById('emErr').innerHTML="Field is Empty!!"; return false; }else{ document.getElementById('emErr').innerHTML=""; var atpos = email.indexOf("@"); var dotpos = email.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) { document.getElementById('emErr').innerHTML="Please Input Valid Email!!"; return false; }else{ var description=document.myform.description.value; if(description==""){ document.getElementById('emErr').innerHTML=""; document.getElementById('decErr').innerHTML="Field is Empty!!"; return false; }else{ document.getElementById('decErr').innerHTML=""; //return true; $.ajax({ data: {name:name,phone:phone,email:email,description:description}, type: "post", url:"contact_submit.php", success: function(data){ jQuery('#myModal').modal('show'); } }); return false; } } } } } } } </script> </div> </body> </html>
This is the simple JavaScript form validation, you can use in your web application. In a web application need form validation for wrong information insert by a user. It will submit a clear statement with all related data.