Page 1 of 1

javascript validation errors to be displayed

Posted: Fri Apr 25, 2014 1:48 pm
by jackgoddy123
Hello all,
I am quite stuck with the validation part with different requirement in validation. Below is the list which i am working for my application module:
a. Form will consist of two input fields (name and email) and a submit button.
b. On submit, the validation should check if the fields are empty.
c. If any field is empty, the text colour as well as border of the field should turn red. (No need to show an error message)
d. When I start typing in the field, The text and border colour should return to default colour.

Below is the code which i had tried:

Code: Select all

<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>
The above form works for all the fields but i need only two as specified above as well as the textbox border coloring for errors.
Really need help. If someone could plese help me out

Re: javascript validation errors to be displayed

Posted: Fri May 23, 2014 12:22 am
by ryancody
You can create a form with all error messages display at once.