We already discussed about PHP contact form in the past article. Now we will discuss about how to create contact form validation in Javascript.
You can use this validation part together with PHP contact form. Click the below button to see the demo for PHP contact form with Javascript validation.
Demo For PHP Contact Form with Javascript Validation
Required file:
contact_form_js_validation.html
In Javascript there are many validation methods available, here we have used simple method and this will be easily understood by everyone.
Process explanation:
When user click the submit button, the validateForm() Javascript function will be called. Normally the form action page will be executed, but in the form tag we have used the onSubmit attribute in which we have used Javacript function and so it will be called before the redirection of the action page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
function validateForm() { // clear all success and error block clearAllErrorBlock(); var name = document.getElementById('name').value; var email = document.getElementById('email').value; var contact_number = document.getElementById('contact_number').value; var message = document.getElementById('message').value; var error_status = false; if(name == '') { showErrorBlock('name', 'Name'); error_status = true; } if(email == '') { showErrorBlock('email', 'Email'); error_status = true; } if(contact_number == '') { showErrorBlock('contact_number', 'Contact number'); error_status = true; } if(message == '') { showErrorBlock('message', 'Message'); error_status = true; } if(error_status) // error exists { document.getElementById('error_msg').innerHTML = 'Please correct all the fields'; document.getElementById('error_msg').classList.remove('hidden'); } else // no error { document.getElementById('success_msg').innerHTML = 'Thank you. There are no validation issue.'; document.getElementById('success_msg').classList.remove('hidden'); } return false; } |
The clearAllErrorBlock() function is used to hide the error and success block.
|
1 2 3 4 5 6 7 8 9 10 |
function clearAllErrorBlock() { var err_classes = document.getElementsByClassName('error'); for (var i = 0; i < err_classes.length; i++) { var element = err_classes[i]; element.classList.add('hidden'); } document.getElementById('success_msg').classList.add('hidden'); } |
We can get the input value either by Id or Class name, where we have used document.getElementsByClassName function to get the input value. Normally Id is unique of element in the same HTML file, but we can use Class in many elements of the same file.
Using document.getElementById method we will fetch the corresponding element’s value and assign it to the new variable inside validateForm() function.
If the assigned variable is empty, then we need to display the error, this is done by the custom Javascript function showErrorBlock().
|
1 2 3 4 5 6 |
function showErrorBlock(field_name, cab_field) { document.getElementById('err_'+field_name).innerHTML = cab_field + ' is required'; document.getElementById('err_'+field_name).classList.remove('hidden'); } |
The variable error_status inside validateForm() is used to check if any validation issue exists or not. If an error exists, then the page will be retained there and there will be shown error messages in the corresponding field. Otherwise, we will redirect the user into the form action page, but in this example we will just show the success message and the page is retaining there only, if you want the PHP backend process then please see the article PHP contact form.
Full source code of contact_form_js_validation.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP Contact Form with Javascript Validation</title> <style> .error { color:red; } .success { color:green; } .hidden { display:none; } </style> <script> function clearAllErrorBlock() { var err_classes = document.getElementsByClassName('error'); for (var i = 0; i < err_classes.length; i++) { var element = err_classes[i]; element.classList.add('hidden'); } document.getElementById('success_msg').classList.add('hidden'); } function showErrorBlock(field_name, cab_field) { document.getElementById('err_'+field_name).innerHTML = cab_field + ' is required'; document.getElementById('err_'+field_name).classList.remove('hidden'); } function validateForm() { // clear all success and error block clearAllErrorBlock(); var name = document.getElementById('name').value; var email = document.getElementById('email').value; var contact_number = document.getElementById('contact_number').value; var message = document.getElementById('message').value; var error_status = false; if(name == '') { showErrorBlock('name', 'Name'); error_status = true; } if(email == '') { showErrorBlock('email', 'Email'); error_status = true; } if(contact_number == '') { showErrorBlock('contact_number', 'Contact number'); error_status = true; } if(message == '') { showErrorBlock('message', 'Message'); error_status = true; } if(error_status) // error exists { document.getElementById('error_msg').innerHTML = 'Please correct all the fields'; document.getElementById('error_msg').classList.remove('hidden'); } else // no error { document.getElementById('success_msg').innerHTML = 'Thank you. There are no validation issue.'; document.getElementById('success_msg').classList.remove('hidden'); } return false; } </script> </head> <body> <fieldset> <legend><h1>Contact Form Validation in Javascript</h1></legend> <h2 id="error_msg" class="error hidden"></h2> <h2 id="success_msg" class="success hidden"></h2> <form action="#" method="post" onSubmit="return validateForm();"> Name:<br> <input type="text" name="name" id="name" value=""> <div id="err_name" class="error hidden"><br/></div> <br><br> Email:<br> <input type="text" name="email" id="email" value=""> <div id="err_email" class="error hidden"><br/></div> <br><br> Contact Number:<br> <input type="text" name="contact_number" id="contact_number" value=""> <div id="err_contact_number" class="error hidden"><br/></div> <br><br> Message:<br> <textarea name="message" id="message" rows="5" cols="22"></textarea> <div id="err_message" class="error hidden"><br/></div> <br><br> <input type="submit" value="Submit"><br><br> </form> </fieldset> </body> </html> |
Click the below button to see the demo.
Demo
