JavaScript Validation with Error Messages Shows on Same Page


Tip Abstraction:
        As a student, normally we validate forms using JavaScript and show error messages as a message box. Here this post describes how to display an error message on same page as text.
JavaScript Form Validation with Error Messages Same PageInfolet already wrote an article about log in form validation using JavaScript. In there, error messages will show as alert boxes. In professional works, error messages in alert boxes are not good.
So this article contains a registration form validation with showing error messages in same page using JavaScript.
For this, an ‘id’ used to represent and display error messages, so error messages can show in any place that you wrote the ‘id’. We can write ‘id’ with tags like <p>, <div> etc. Here Infolet wrote ‘id’ with <div> tag. So we can customize the error messages with different size and color of fonts. So this method is more perfect that alert box method.

Register.html

<center>
<table border="1" >
<tr>
<td>
<form name = "registerationform" method="POST" action="welcome.html" onsubmit="return(regvalidate())">
<table>
<tr>
<td>First Name: </td> <td><input type = "text" name="fnametxt" /><br/> </td>
</tr>
<tr>
<td>Second Name: </td> <td> <input type = "text" name="snametxt" /><br/></td>
</tr>
<tr>
<td> User Name:</td> <td><input type = "text" name="unametxt" /><br/> </td>
</tr>
<tr>
<td>Email Address: </td> <td> <input type = "text" name="emailtxt" /><br/></td>
</tr>
</tr>
<tr>
<td> Password : </td> <td> <input type = "password" name="pwdtxt" /> <br/> </td>
</tr>
</tr>
<tr>
<td> Confirm : </td> <td> <input type = "password" name="cpwdtxt" /> <br/> </td>
</tr>
</table>
<font color='red'> <DIV id="une"> </DIV> </font>
<input type = "submit" value="Register Now" />
</form>
</td>
</th>
</tr>
</table>
</tr>
</table>
</tr>
<SCRIPT type="Text/JavaScript">
function regvalidate()

{
if((document.registerationform.fnametxt.value=="")&&(document.registerationform.snametxt.value==""))
 {
  document.getElementById('une').innerHTML = "First name or Second name should not be empty";
  registerationform.fnametxt.focus();
  return(false);
 }

if(document.registerationform.unametxt.value=="")
  {
  document.getElementById('une').innerHTML = "User name field should not be empty";
  registerationform.unametxt.focus();
  return(false);
 }

if(document.registerationform.emailtxt.value=="")
  {
  document.getElementById('une').innerHTML = "Email id requered";
  registerationform.emailtxt.focus();
  return(false);
  }

if(document.registerationform.pwdtxt.value=="")
   {
  document.getElementById('une').innerHTML = "Please type a password";
  registerationform.pwdtxt.focus();
  return(false);
   }

if((document.registerationform.pwdtxt.value) != (document.registerationform.cpwdtxt.value))
   {
  document.getElementById('une').innerHTML = "Password Must be equal";
  registerationform.pwdtxt.value = "";
  registerationform.cpwdtxt.value = "";
  registerationform.pwdtxt.focus();
  return(false);
  }
else
   {
   return(true);
   }
}
</SCRIPT>
</td>
</tr>
</table>
</center>

If registration is clear, then page ‘welcome.html’ will open.

Welcome.html

<center>
<table border="1" bgcolor="#FFFFCD" style="border-collapse:collapse";>

<tr><td>
infolet
</td></tr>
</table></center>



Sample Outputs:

Register.html

JavaScript Form Validation with Error Messages Same Page

Welcome.html

JavaScript Form Validation with Error Messages Same Page




7 comments:
  1. This is code is working fine...but small correction has to be done..If we submitting the form with out filling...it's showing error message..but the page is changing.

    ReplyDelete
  2. this code is fine but its showing only one error message at a time .. wat if i want to display all error messages if user is trying to submit form without filling anything...
    Please help me out M facing this prob in my code..

    ReplyDelete
    Replies
    1. You need to create separate DIV to show each error messages like showing one message in above code:

      < DIV id="une" > < / DIV >

      Delete
  3. Thanks for this code ,can you tell me how to keep the error message in the right hand side of the text box not in the last line....Binay

    ReplyDelete
    Replies
    1. Here I put each element on table rows, If you want to put the error message on right side, you may create a separate table with 2 column only and place the text on second column. Or apply a css code in font tag like < font style="text-align:right;" >

      Delete