javascript validation errors to be displayed after each textbox

[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:

 

<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

 

[hakimserwa]

try this

if(document.registerationform.emailtxt.value=="")
  {
  document.getElementById('une').innerHTML = "Email id requered";
  registerationform.emailtxt.style.border="solid red"; // add this
  registerationform.emailtxt.focus();
  return(false);
  }

[fastsol]

If you're using html5 then you could just put required in the input code and the browser will handle checking if it's empty.

<input type="text" name="whatever" required="required"/>