Program 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.
YOC 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 YOC 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>
Sample Outputs:
Register.html
Welcome.html
Be First to Comment