Help with Advanced Form Checker Checkboxes
[nobr]Hi
Before I give my code I just want to say that the following code is in good working order.
I will give my question/problem at the end.
It might be a little advanced for this forum so I don't want to explain every step but,
What the script does is it checks the form and shows a popup window after you click on
the submit button. When one or more input boxes are empty (you will see in the the button script
there are some advanced script checking and this must be in the correct order and is Case sensitive)
When all the input boxes are filled out corectly as you want it to be, it gives
another popup window asking you if your Details are correct.
Here is the magic code
The JavaScript validation code just below the head of your html
<SCRIPT>
function checkcomb(form,title)
{
var result=true;
var missinginfo = title;
for (var i=0; i<form.elements.length; i++)
{
var validateType = form.elements[i].getAttribute('alt');
var validateObj = form.elements[i];
if (validateType)
{
var params = validateType.split("|");
for (var j=0;j<params.length;j++)
{
switch (params[j])
{
case'COMB' :
var combineObjs = validateObj.getAttribute('combine');
var combineObj = combineObjs.split("|");
result =false;
for (var k=0;k<combineObj.length;k++)
{
var x = combineObj[k];
for (var l=0;l<form.elements.length;l++)
if (x == form.elements[l].name)
if (form.elements[l].value != 0)
result =true;
}
if (!result)
missinginfo +="\n- " + validateObj.getAttribute('emsg') ;
break;
}
if (!result)
break;
}
}
}
if (result)
form.submit();
else
alert(missinginfo);
returnfalse;
}
function checkform(form,title)
{
var result=true;
var nosubmit=false;
var missinginfo = title;
for (var i=0; i><form.elements.length; i++)
{
var validateType = form.elements[i].getAttribute('alt');
var validateObj = form.elements[i];
if (validateType)
{
var params = validateType.split("|");
for (var j=0;j<params.length;j++)
{
switch (params[j])
{
case'NOSUBMIT' :
{
nosubmit =true;
}break;
case'ZERO' :if (validateObj.value == 0)
{
missinginfo +="\n- " + validateObj.getAttribute('emsg') ;
if (result) validateObj.focus();
result =false;
}break;
case'BLANK' :if (validateObj.value =='')
{
missinginfo +="\n- " + validateObj.getAttribute('emsg') ;
if (result) validateObj.focus();
result =false;
}break;
case'EMAIL' :
var re_mail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+$/;
if ((validateObj.value =='') || (validateObj.value ==' ') ||!re_mail.test(validateObj.value) )
{
missinginfo +="\n- " + validateObj.getAttribute('emsg') ;
if (result) validateObj.focus();
result =false;
}break;
case'RANGE' :
var lb = parseInt(validateObj.getAttribute('mini'));
var ub = parseInt(validateObj.getAttribute('maxi'));
if (isNaN(validateObj.value) || (validateObj.value >< lb) || (validateObj.value > ub))
{
missinginfo +="\n- " + validateObj.getAttribute('emsg') ;
if (result) validateObj.focus();
result =false;
}break;
case'COMB' :
var combineObjs = validateObj.getAttribute('combine');
var combineObj = combineObjs.split("|");
result =false;
for (var k=0;k<combineObj.length;k++)
{
var x = combineObj[k];
for (var l=0;l<form.elements.length;l++)
if (x == form.elements[l].name)
if (form.elements[l].value != 0)
result =true;
}
if (!result)
missinginfo +="\n- " + validateObj.getAttribute('emsg') ;
break;
}
if (!result)break;
}
}
}
if (result)
{
if (!nosubmit)
form.submit();
else
returntrue;
}
else
alert(missinginfo);
returnfalse;
}
></SCRIPT>
If you want to tidy up the abave code in your html head then just create a separate validate.js file and put this into your head
<SCRIPT language=javascript src="scripts/validate.js" type=text/javascript></SCRIPT>
This is the Form That fits within your html
<FORM name=form action=preview.php method=post >
<table width="100%">
<tr>
<td width="49%"><div align="right"><span class=style2><font face=arial,helvetica size=2>*
</font>Name:</span></div></td>
<td width="51%" valign="middle"> <input maxlength=40 size=25 alt=BLANK name=realname emsg="Please enter your Name"></td>
</tr>
<tr>
<td><div align="right"><span class=style2><font face=arial,helvetica size=2>*
</font>Display Name:</span></div></td>
<td valign="middle"> <input maxlength=40 size=25 alt=BLANK name=displayname emsg="Please enter your Display Name"></td>
</tr>
<tr>
<td><div align="right"><span class=style2><font face=arial,helvetica size=2>*
</font>Email Address:</span></div></td>
<td valign="middle"> <input maxlength=40 size=25 name=email alt=EMAIL emsg="Please enter your Email" ></td>
</tr>
<tr>
<td><div align="right"><font face=arial,helvetica
size=2><span class=style2><font face=arial,helvetica size=2>*</font></span>
Race</font></div></td>
<td valign="middle"> <select name=race emsg="Please choose your Race" alt="ZERO">
<option value=0 selected>Any</option>
<option value=1>American Indian</option>
<option value=2>Asian</option>
<option value=3>Black</option>
</select></td>
</tr>
<tr>
<td> </td>
<td valign="middle"><input tabindex="1" type="file" name="img1" emsg="You must upload 1 Image" alt="ZERO" /></td>
</tr>
<tr>
<td><div align="right">Language</div></td>
<td valign="middle"><font face=arial,helvetica
color=white size=2>
<input name="afrikaans" type=checkbox value=1>
</font><font face=arial,helvetica size=2> Afrikaans<br>
<input name="arabic" type=checkbox value=1>
Arabic<br>
<input name="chinese" type=checkbox value=1>
Chinese<br>
<input name="dutch" type=checkbox value=1>
Dutch<br>
<input name="english" type=checkbox value=1>
English</font></td>
</tr>
<tr>
<td> </td>
<td valign="middle"><input name="button" type=button onClick="this.form.submitted = checkform(this.form,'Please correct the following...'); if (this.form.submitted && confirm('Is the following information correct?\n\n ::PERSONAL DETAILS:: \nYour Name: '+ document.form.realname.value+'\nDisplay Name: '+ document.form.displayname.value+'\nYour Eamil: '+ document.form.email.value+'\nYour Race: '+ document.form.race.value+'\nYour Image: '+ document.form.img1.value )) { form.submit(); }" value=Submit... alt=NOSUBMIT></td>
</tr>
</table>
</FORM>
Please note: The code on the submit button must remain in one line as per above example.
My Question/Problem
If I want the person to select at least one checkbox (anyone of the for) How would I modify the code.
I can make the javascript check the checkboxes in the form by simply adding the following code into the submit button
+'\nYour Language: '+ document.form.english.value
This code must be in one line as per the submit button code
And then modifying the Checkbox code like this
<input name="english" type=checkbox value=1 emsg="Please Select this Language" alt="ZERO">
But this you will find does not work as desired.
I want the user to select any of the four languages available but at least one must be selected and no more than four languges if there are more.
If anyone could help me modify the code I would appreciate it.[/nobr]
