Javascript Form Validation 1

Jozshi · Oct 24, 2001

Hey ppl!

I have a slight problem and just cant seem to solve the problem I am having with form validation to check a radio button has been chosen.

Basically I have 4 questions with 2 radio buttons to each question, one is 'Yes' and the other is 'No' (default is No).

Now on the first 2 questions it doesnt matter what they choose, but on the last 2 they must choose 'yes' in order for the form to submit.

If they havent answered 'Yes' on either of the last 2 Radiobuttons then I want a messagebox prompt to say so.

I have acquired numerous javascript examples for this, but they all use a array count of the radio buttons, but as you can appreciate thats useless as there will always be 4 buttons checked.

Any ideas or websites to check out etc etc would be great.

Thanks in advance!

- F8i

baad · Oct 24, 2001

show us what you have for now (i mean html code of your form & functions you use to validate)

as for me - too lazy to start helping you from a total zero

Victor

Jozshi · Oct 24, 2001

Ok, here is the code!
-----------------------------------------------------------

<html>
<head>
<title>Validation Form</title>
<link rel="STYLESHEET" type="text/css" href="../style.css">
<script language="JavaScript">
<!--
function emptyvalidation(entered, alertbox)
{
with (entered)
{
if (value==null || value=="&quot

{if (alertbox!="&quot

{alert(alertbox);} return false;}
else {return true;}
}
}
function billformvalidation(enquiryForm)
{
with (enquiryForm)
{
if (emptyvalidation(dom_bankname,"Please enter the name of your Bank&quot

==false) {dom_bankname.focus(); return false;};
if (emptyvalidation(dom_accname,"Please enter your Account Name&quot

==false) {dom_accname.focus(); return false;};
if (emptyvalidation(dom_sortcode,"Please enter your Sortcode&quot

==false) {dom_sortcode.focus(); return false;};
if (emptyvalidation(dom_accnumber,"Please enter your Account Number&quot

==false) {dom_accnumber.focus(); return false;};
if (emptyvalidation(dom_badd1,"Please enter your address&quot

==false) {dom_badd1.focus(); return false;};
if (emptyvalidation(dom_btown,"Please enter a town&quot

==false) {dom_btown.focus(); return false;};
if (emptyvalidation(dom_bpcode,"Please enter your postcode&quot

==false) {dom_bpcode.focus(); return false;};
if (FUNCTIONHERE(dom_q3,"You must answer yes to this question before you can continue&quot

==false) {dom_q4.focus(); return false;};
if (FUNCTIONHERE(dom_q4,"You must answer yes to this question before you can continue&quot

==false) {dom_q3.focus(); return false;};
}
}
</head>
<body topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0">
<form action="dom-step4.asp" method="post" name="firstform" onsubmit="return billformvalidation(this)">
<table width="400" align="center">
<tr>
<td colspan="5">
<div align="right"><img src="../imagesweb/spacer.gif" width="100%" height="7"></div>
</td>
</tr>
<tr>
<td colspan="5">
<div align="right" class="titleform"><b>Bank Details</b></div>
</td>
</tr>
<tr>
<td width="16"> </td>
<td width="109">Bank Name: <b><font color="#FF0000">*</font></b></td>
<td colspan=3>
<input name="dom_bankname" type="TEXT" size="20" tabindex="1">
</td>
</tr>
<tr>
<td width="16"> </td>
<td width="109">Account Name: <b><font color="#FF0000">*</font></b></font></td>
<td colspan=3><input name="dom_accname" size="20" tabindex="2"></td>
</tr>
<tr>
<td width="16"> </td>
<td width="109">Sort Code: <b><font color="#FF0000">*</font></b></td>
<td colspan=3><input name="dom_sortcode" type="TEXT" size="35" tabindex="3"></td>
</tr>
<tr>
<td width="16"> </td>
<td width="109">Account Number: <b><font color="#FF0000">*</font></b></td>
<td colspan=3><input name="dom_accnumber" type="TEXT" size="35" tabindex="4"></td>
</tr>
<tr>
<td colspan=5></td>
</tr>
<tr>
<td colspan=5>
<div align="right" class="titleform"><b>Billing Details</b></div>
</td>
</tr>
<tr>
<script language="JavaScript">
function updaterecontact()
{
if (window.document.firstform.dom_badd1.value == window.document.firstform.dom_useradd1.value ) {
window.document.firstform.dom_badd1.value='';
window.document.firstform.dom_badd2.value='';
window.document.firstform.dom_btown.value='';
window.document.firstform.dom_bcounty.value='';
window.document.firstform.dom_bpcode.value='';
}else{
window.document.firstform.dom_badd1.value=firstform.dom_useradd1.value;
window.document.firstform.dom_badd2.value=firstform.dom_useradd2.value;
window.document.firstform.dom_btown.value=firstform.dom_usertown.value;
window.document.firstform.dom_bcounty.value=firstform.dom_usercounty.value;
window.document.firstform.dom_bpcode.value=firstform.dom_userpcode.value
}
}
</script>
<td colspan="5" align="center">
<input type=button onMouseup="updaterecontact()" value="Use Customer Details" tabindex="5">
</td>
</tr>
<tr>
<td width="16"> </td>
<td width="109">Billing Address: <b><font color="#FF0000">*</font></b></td>
<td colspan=3><input name="dom_badd1" type="TEXT" size="35" tabindex="6"></td>
</tr>
<tr>
<td width="16"> </td>
<td width="109" height="31">Address Continued: </td>
<td colspan=3><input name="dom_badd2" type="TEXT" size="35" tabindex="7"></td>
</tr>
<tr>
<td width="16"> </td>
<td width="109">Town: <b><font color="#FF0000">*</font></b></td>
<td width="80"><input name="dom_btown" type="TEXT" size="20" tabindex="8"> </td>
<td width="41">County: </td>
<td align=right width="60"><input name="dom_bcounty" type="TEXT" size="10" tabindex="9"></td>
</tr>
<tr>
<td width="16"> </td>
<td width="109">Postal Code: <b><font color="#FF0000">*</font></b></td>
<td colspan=1 width="80"><input name="dom_bpcode" type="TEXT" size="20" tabindex="10"> </td>
<td colspan=2 rowspan=2 valign=bottom> </td>
</tr>
<tr bgcolor="#CCE0F5">
<td colspan="5"><img src="#" height="1"></td>
</tr>
<tr>
<td width="16"><a href="./uohelp/step3_q1.html" target="_blank"><img src="../images/qmark.gif" alt="" border="0" align="left"></a></td>
<td colspan="3">Do you have any special needs for Atlantic to take into account?</td>
<td align="right"><input class=checkbox type="radio" name="dom_q1" value="Yes" tabindex="11">Yes  <input tabindex="12" class="checkbox" type="radio" name="dom_q1" value="No" checked>No</td>
</tr>
<tr>
<td width="16"><a href="./uohelp/step3_q2.html" target="_blank"><img src="../images/qmark.gif" alt="" border="0" align="left"></a></td>
<td colspan="3">Would you like to receive any further information?</td>
<td align="right"><input class=checkbox type="radio" name="dom_q2" value="Yes" tabindex="13">Yes  <input class="checkbox" tabindex="14" type="radio" name="dom_q2" value="No" checked>No</td>
</tr>
<tr>
<td width="16"><a href="./uohelp/step3_q3.html" target="_blank"><img src="../images/qmark.gif" alt="" border="0" align="left"></a></td>
<td colspan="3">Have you read the Atlantic <a href="#">Terms and Conditions?</a></td>
<td align="right"><input class=checkbox type="radio" name="dom_q3" value="Yes" tabindex="15">Yes  <input class="checkbox" tabindex="16" type="radio" name="dom_q3" value="No" checked>No</td>
</tr>
<tr>
<td width="16"><a href="./uohelp/step3_q4.html" target="_blank"><img src="../images/qmark.gif" alt="" border="0" align="left"></a></td>
<td colspan="3">Do you understand that you have completed a legally binding contract?</td>
<td align="right"><input class=checkbox type="radio" name="dom_q4" value="Yes" tabindex="17">Yes  <input class="checkbox" tabindex="18" type="radio" name="dom_q4" value="No" checked>No</td>
</tr>
<tr>
<td colspan=5 align=right><br><input class="button" border="0" type=IMAGE onMouseOut="MM_swapImgRestore(),this.style.cursor='default'" onMouseOver="MM_swapImage('SUBMIT','','../images/nextstep_on.gif',1),this.style.cursor='hand'" src="../images/nextstep_off.gif" name="SUBMIT" tabindex="15"></td>
<tr>
</table>
</form>

-----------------------------------------------------------

Sorry, didnt remove the image links...but at least you get the idea.

Now it hasnt got the code for the Radiobutton check included because...well I dont have any as i cant seem to solve it, but everything else should be there. No code comments included either....sorry, thats just the way I wrote this particular site....in a rush!

Hope that helps...if you would rather me send a file then let me know!

Thanks!

- F8i

baad · Oct 24, 2001

wooo.. well, i meant a small piece of code..

anyway, here is one of the ways to do that (if you'd use your function)

Code:

function emptyvalidation(entered, alertbox){
if (entered.type==&quot;text&quot;){
with (entered){
if (value==null || value==&quot;&quot;) {if (alertbox!=&quot;&quot;) {alert(alertbox);} return false;}
else {return true;}
}}
else if(entered.length){
for (ii=0; ii<entered.length; ii++){
with (entered[ii]){
if (value==&quot;Yes&quot; && checked==false){
if (alertbox!=&quot;&quot;){alert(alertbox);}
 return false;
}
}}
}
return true
}

then call it just as in your other cases
Victor

Jozshi · Oct 24, 2001

Thanks very much.

You got my vote!

- F8i - F8i
Q:"Ever notice something? Unix comes with compilers. NT comes with Solitaire."

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript Form Validation 1

Jozshi

Programmer

baad

Programmer

Jozshi

Programmer

baad

Programmer

Jozshi

Programmer

Similar threads

Part and Inventory Search

Sponsor