While working on a PHP web application, I have required a form validation system where I want to print the error of my form fields in their respective allocated <div>. There are the ton of examples available where you find the solution but all those examples were showing the error message using the alert() function of Javascript and I noticed a problem with alert() function that when you clicked an OK button of the alert the page gets load again.
But after wasting my time to search an appropriate example which suits on my requirement and project need, I decided to make my self. I will not guarantee that this is the easiest and correct solution to the problem but it worked for me.
and if you have any better idea to perform this job then you can paste your solution in the comment box below.
Let’s dirty our hands into the coding.
My final output:
In the above screenshot, my form shows an error when any value will be empty or incorrect.
For this example, I have used
- HTML
- Bootstrap
- Javascript
index.php (HTML with Bootstrap)
|
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 |
<html lang="en"> <head> <title>Add a Property | Owner Administrator</title> <link href="assets/admin-assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <form method="post" action="register" id="add_property"> <div class="form-group"> <label for="exampleInputEmail1">Property Name*</label> <input type="text" class="form-control" id="prop_name" name="prop_name" aria-describedby="emailHelp" placeholder="e.g -> Harish Sharma" onfocusout="validate_value(1)"> <small class="form-text text-danger font-weight-bold" id="sprop_name"></small> </div> <div class="form-group"> <label for="exampleInputEmail1">Assigned Manager Name*</label> <input type="text" class="form-control" id="assign_manager" name="assign_manager" aria-describedby="emailHelp" placeholder="e.g -> Shri Kapil Dev Sharma" onfocusout="validate_value(2)"> <small class="form-text text-danger font-weight-bold" id="sassign_manager"></small> </div> <div class="form-group"> <label for="exampleInputEmail1">Manager Contact*</label> <input type="text" class="form-control" id="manager_contact" name="manager_contact" aria-describedby="emailHelp" placeholder="e.g -> 97XXXXXXX0" onfocusout="validate_value(3)"> <small class="form-text text-danger font-weight-bold" id="smanager_contact"></small> </div> <div class="form-group"> <label for="exampleInputEmail1">Zip Code*</label> <input class="form-control" name="zip" id="zip_code" onfocusout="validate_value(4)"></input> <small class="form-text text-danger font-weight-bold" id="szip_code"></small> </div> <button class="btn btn-primary" onclick="return validate_value('submit')">Add Property</button> </form> </div> </body> </html> |
Explanation: The HTML form is the same as other normal forms. The important thing should be noticed that I have called validate_value() function in onfocusout attribute into the input field. This javascript function takes a parameter as an identifier and will be run whenever anyone will move the focus from the current input field to another.
I have also used the same function on “onclick” attribute of <button> tag. This function will be run when the button will be clicked.
Let’s move to our Javascript
validation.js
|
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 |
function validate_value(param){ var propertyName = document.forms["add_property"]["prop_name"].value.trim(); var assign_manager = document.forms["add_property"]["assign_manager"].value.trim(); var manager_contact = document.forms["add_property"]["manager_contact"].value.trim(); var zip_code = document.forms["add_property"]["zip_code"].value.trim() var property_span= document.getElementById('sprop_name'); var assign_manager_span = document.getElementById('sassign_manager'); var manager_contact_span = document.getElementById('smanager_contact'); var zip_span = document.getElementById('szip_code'); var mobile_reg = /[2-9]{2}\d{8}/ if(param == 1){ if(propertyName == ""){ property_span.innerHTML = 'You can not leave this field blank'; return false; } if(propertyName.length <=2 || propertyName.length >30){ property_span.innerHTML = 'Property name length must be between 3 to 30'; return false; } else{ property_span.innerHTML = ''; return false; } } if(param == 2){ if(assign_manager == ""){ assign_manager_span.innerHTML = 'You can not leave this field blank'; return false; } if(assign_manager.length <=2 || assign_manager.length >30){ assign_manager_span.innerHTML = 'Manager name length must be between 3 to 30'; return false; } else{ assign_manager_span.innerHTML = ''; return false; } } if(param == 3){ if(manager_contact == ""){ manager_contact_span.innerHTML = 'You can not leave this field blank'; return false; } if(!manager_contact.match(mobile_reg)){ manager_contact_span.innerHTML = 'Mobile Number format did not match'; return false; } else{ manager_contact_span.innerHTML = ''; return false; } } if(param == 4){ if(zip_code == ""){ zip_span.innerHTML = 'Zip code value must be filled.'; return false; } var zip_reg = /^[0-9]{6}$/ if(!zip_code.match(zip_reg)){ zip_span.innerHTML = 'Entered Zip code is not valid.'; return false; } else{ zip_span.innerHTML = ''; return false; } } if(param == 'submit'){ if(propertyName != "" && assign_manager !="" && manager_contact !="" && zip_code != ""){ if(property_span.innerHTML =="" && assign_manager_span.innerHTML =="" && manager_contact_span.innerHTML == "" && zip_span.innerHTML == ""){ document.getElementById("add_property").submit(); return true; } } else { return false; } } |
Explanation:
Javascript has been lengthy. Is’nt. But believe me, it’s very easy to understand. In this Javascript, I have done only three things.
- Get the Id of an input field and the allocated <div> or <span> where we want to show the error.
- Write the if queries for all field and identify each field with the passing parameter.
- Finally, By using the identifier ‘submit’ we write the submit logic of our form.
Because I have 4 fields so I have used 4 if query and one another for submit.
