<html> <body> <script> function validate() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; var phone = document.getElementById("phone").value; var error_name_id = document.getElementById("error_name"); var error_email_id = document.getElementById("error_email"); var error_phone_id = document.getElementById("error_phone"); var error_msg = document.getElementById("error_msg"); var success_msg = document.getElementById("success_msg"); error_name_id.innerHTML =""; error_email_id.innerHTML =""; error_phone_id.innerHTML =""; if(name == null || name == "" || name == " ") { error_name_id.innerHTML ="Name is Empty"; return false; } else if(email == null || email == "" || email == " ") { error_email_id.innerHTML ="Email is Empty"; return false; } else if(phone == null || phone == "" || phone == " ") { error_phone_id.innerHTML ="Phone is Empty"; return false; } else { // Now all is fine, Form can be submitted. return true; } } </script> <!-------FORM STARTED -----------------> <form name="frm_register" name="" id="" action="" method="POST" onsubmit="return validate();"> <h3>Registration Form</h3> Name: <input type="text" name="name" id="name" > <span id="error_name"></span> <br/> <br/> Email: <input type="email" name="email" id="email"> <span id="error_email"></span> <br/> <br/> Phone: <input type="text" name="phone" id="phone"> <span id="error_phone"></span> <br/> <br/> <input type="submit" name="register" id="register" value="register"> <br/> <span id="error_msg" style="color:red"></span> <span id="success_msg" style="color:green;"></span> </form> <!-----------FORM ENDS ---------------------> </body> </html>