Infolet 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.va
lue==""))
{
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:

- See more at:

http://www.infolet.org/2013/05/registration-form-validation-current-page-appear-errormessage.html#sthash.VMD0fh4I.dpuf