Introduction
This is another html form validator with simple code in javascript, the objetive is to valid specific fields in diferent buttons, then show an alert containing the errors found or just submit the form. The special item is the specification, this is in the button.
HTML Code
this is an HTML code with a form, three fields and two buttons to send information, the firsth one just send the name and the last name, the other button needs all the fields filled to send the information.
<body>
<form id="f" method="post" name="form1">
<DIV align="center">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1" align="center">
<TR>
<TD>Name:</TD>
<TD><INPUT id="txtName" type="text" name="Your Name" ></TD>
</TR>
<TR>
<TD>Last Name:</TD>
<TD><INPUT id="txtLastName" type="text" name="Your Last Name" ></TD>
</TR>
<TR>
<TD>Other:</TD>
<TD><INPUT id="txtOther" type="text" name="Other Data"></TD>
</TR>
<TR>
<TD></TD>
<TD>
<INPUT id="Button2" type="button" value="Send Without Other" name="Button1" ></TD>
</TR>
</TABLE>
<BR>
<INPUT id="Button1" type="button" value="Send All"
name="Button1" >
</DIV>
</form>
<P></P>
</body>
The JavaScript
The firsth function in the script is just To get the element without a form reference or other container reference
it works like:
var temp = document.myform.textboxname;
temp.value;
var temp2 = document.myotherform.textbox2name;
temp2.value;
var temp getTrueElement(textboxname);
temp.value;
var temp2 getTrueElement(textbox2name);
temp2.value;
<script language="javascript">
function getTrueElement(q){
var truth;
if(document.all)
truth = eval("document.all."+q);
if(!document.all && document.getElementById)
truth = document.getElementById(q);
return truth;
}The second function in the script is To validate an array of fields.
Just take a string with the field IDs separated by a character, in this case i use "/", then create the array and set the header error.
function validateForm(arrControles)
{
if (arrControles != "")
{
var aa = new Array();
aa = arrControles.split('/');
var texto='Please fill:\n';
create a boolean to set the valid or invalid value to the form, and read all the controls in the array of IDs, check the field name exist, and check for every controls filled or not, with the .value.length property.
if any field is empty (length is 0) take the control name to show in a custom error, and set the boolean var in false;
finally read the boolean var, if is false, show an alert with the custom string error, and if is true, submit the form.
var boolRes = true;
for(var i=0;i<aa.length;i++)
{
var objTemp=getTrueElement(aa[i]);
if(!objTemp.name) alert('Error: no name exist '+objTemp.id);
if (objTemp.value.length>0){}else{texto+=objTemp.name;texto+='\n'; boolRes=false;}
}
if (boolRes==false){ alert(texto); return false;
} else {
alert('Form Submited');
document.forms["0"].submit();
}
} else {
alert('Form Submited');
document.forms["0"].submit();
}
}
</script>
Using the script
To use this script just set in the button the click action to the name of the function and pass the string with the IDs of the fields to validate separated by a character.
For examle:
<form id="f" method="post" name="form1">
<DIV align="center">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1" align="center">
<TR>
<TD>Name:</TD>
<TD><INPUT id="txtName" type="text" name="Your Name" ></TD>
</TR>
<TR>
<TD>Last Name:</TD>
<TD><INPUT id="txtLastName" type="text" name="Your Last Name" ></TD>
</TR>
<TR>
<TD>Other:</TD>
<TD><INPUT id="txtOther" type="text" name="Other Data"></TD>
</TR>
<TR>
<TD></TD>
<TD>
<INPUT id="Button2" type="button" value="Send Without Other" name="Button1" onclick="validateForm('txtName/txtLastName');"></TD>
</TR>
</TABLE>
<BR>
<INPUT id="Button1" onclick="validateForm('txtName/txtLastName/txtOther');" type="button" value="Send All"
name="Button1" >
</DIV>
</form>
I hope this code helps.
Ing. Marcelo Lujan
