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
The following script changes the textbox border colour on form submission. It also removes the red border when you type into the box. I have used a more compact loop method of checking the input boxes for an entry than your original script, but it does the same thing.
You had a few extra lines in the table which I have removed. I changed the submission “submit” button to a “button” and passed the form object to the review script for easier access to the form elements.
You can see it all working in JSFiddle here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
input { text-align:center; border:2px solid #CCC; }
#wrap { width:400px; height:200px; margin:20px; padding:10px; }
#une { margin-top:10px; }
#reg {margin-top:10px; }
.a13B { color:#F00; }
.cntr { text-align:center; }
</style>
</head>
<body>
<div id="wrap">
<form id="regform" name="registerationform" method="POST" action="welcome.html">
<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="300">
<tr>
<td>First Name: </td>
<td class="cntr">
<input type="text" name="fnametxt" size="20"></td>
</tr>
<tr>
<td>Second Name: </td>
<td class="cntr">
<input type="text" name="snametxt" size="20"> </td>
</tr>
<tr>
<td>User Name:</td>
<td class="cntr">
<input type="text" name="unametxt" size="20"> </td>
</tr>
<tr>
<td>Email Address: </td>
<td class="cntr">
<input type="text" name="emailtxt" size="20"> </td>
</tr>
<tr>
<td>Password : </td>
<td class="cntr"><input type="password" name="pwdtxt" size="20"> </td>
</tr>
<tr>
<td>Confirm : </td>
<td class="cntr"><input type="password" name="cpwdtxt" size="20"> </td>
</tr>
</table>
<input id="reg" name="reg" type="button" onclick="regvalidate(this.form)" value="Register Now">
</form>
<div id="une" class="a13B">
</div>
</div>
<!-- end wrap -->
<script type="text/javascript">
var uneObj=document.getElementById("une"); // object ref to msg line
var currentBrdObj;
//
function regvalidate(formObj)
{ uneObj.innerHTML=""; // clear msg line before resubmitting
// gather object ref to input boxes
var allInputs=document.getElementById("regform").getElementsByTagName("input");
// check if value of box is ""
for(var i=0;i<allInputs.length;i++)
{ if(allInputs[i].name !="reg") // ignore submit button
{ if(allInputs[i].value=="")
{ uneObj.innerHTML=msg[i];
if(currentBrdObj){currentBrdObj.style.border="2px solid #CCC"; }
allInputs[i].style.border="2px solid #F00";
currentBrdObj=allInputs[i];
allInputs[i].onclick=function(){ this.style.border="2px solid #CCC"; }
return;
} } }
// check if password and confirm are the same
if((formObj.pwdtxt.value) != (formObj.cpwdtxt.value))
{ uneObj.innerHTML = msg[msg.length-1]; // last msg in array
formObj.pwdtxt.value = ""; formObj.pwdtxt.style.border="";
formObj.cpwdtxt.value = ""; formObj.cpwdtxt.style.border="";
return;
}
// all ok so submit form
uneObj.innerHTML = "All ok so submitting form";
formObj.submit();
}
// -----
var msg =["First name should not be empty","Second name should not be empty",
"User name field should not be empty","Email id required",
"Please type a password","Please confirm password"];
msg[msg.length]="Passwords must be equal.<br>Please type a password";
//
</script>
</body>
</html>