Complex form validation problem

I have a form that includes both text input and radio buttons.

I want to validate the form onsubmit as follows:
A radio button MUST be selected for submit to go ahead
BUT
if one or both of the text fields is empty, I want to display a confirm box to the user, just to check that they really want to submit blank details.

I see the logic as going:
onsubmit call function to
--> first check a radio button selected, if not return false straight away
--> if radio is selected, check whether text fields are empty, if they are, display confirm box
--> return result of confirm box

Thanks to a solution found on this forum I have the radio button check working correctly, but as soon as I add the text checks to the validation function, the whole thing doesn't work.

I am not sure how to put the confirm code into another sub-function. Can someone see the holes in my logic that is making the validateForm return true every time, even when a radio box is NOT selected?!

Cheers
Rosie

FYI this is my test code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
<title>Test Form Validation</title>
</head>
<script type="text/javascript"> 
function validateForm(frm,r1)
{ // check that a radio button is selected
var rad_arr=[r1]; 
var rd_ar_ln=rad_arr.length; 
var i=0; 
while(i<rd_ar_ln)
{ 
var curr_rad=frm[rad_arr[i]]; 
var rad_len=curr_rad.length; 
for(var n=0;n<rad_len;n++)
{ 
if(curr_rad[n].checked)break; 
else if(n==rad_len-1)
{ 
// no radio button is selected
alert("Please select a pack option at step 2");
return false;
} 
} 
i++; 
} // end while

var x = document.forms['cart'].elements;

if (x['detail-1'].value==null Or x['detail-1'].value=="")
{
var answer = confirm("You have left Detail 1 empty. Press OK to continue or Cancel to go back");
if !(answer)
{
detail-1.focus();
return false;
}
}

if (x['detail-2'].value==null Or x['detail-2'].value=="")
{
var answer = confirm("You have left Detail 2 empty. Press OK to continue or Cancel to go back");
if !(answer)
{
detail-2.focus();
return false;
}
}

return true;

} // end validateForm
</script>
<body>

<form name="cart" method="post" action="" onsubmit="return validateForm(this,'pack-option')">
 Enter your personal info to customise the product:<br><br>
 <input type="text" name="detail-1" id="detail-1" value="" size="25" maxlength="50">
 <br>First name<br><br>
 <input type="text" name="detail-2" id="detail-2" value="" size="25" maxlength="50">
 <br>Surname
 <br><br><br>
 Product One $10
 <input type="radio" name="pack-option" onclick="this.form.elements['my-item-name'].value='Product One $10';this.form.elements['my-item-id'].value='1';this.form.elements['my-item-price'].value='10.00';" /><br />
 Product Two $15
 <input type="radio" name="pack-option" onclick="this.form.elements['my-item-name'].value='Product Two $15';this.form.elements['my-item-id'].value='2';this.form.elements['my-item-price'].value='15.00';" /><br /><br />
 <i>OR Both</i> products for $20 (with same custom details)
 <input type="radio" name="pack-option" onclick="this.form.elements['my-item-name'].value='Value Set';this.form.elements['my-item-id'].value='3';this.form.elements['my-item-price'].value='20.00';" /><br />
 <input type="hidden" name="my-item-name" />
 <input type="image" src="images/add-to-cart.gif" onmouseover="this.src='images/add-to-cart-hover.gif'" onmouseout="this.src='images/add-to-cart.gif'" name="my-add-button" value="add to cart" class="button" />
 </form>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title>Test Form Validation</title> <script type="text/javascript"> function CheckRadio(frm,r1) { var rad_arr=[r1]; var rd_ar_ln=rad_arr.length; var i=0; while(i<rd_ar_ln) { var curr_rad=frm[rad_arr[i]]; var rad_len=curr_rad.length; for(var n=0;n<rad_len;n++) { if(curr_rad[n].checked)break; else if(n==rad_len-1) { // no radio button is selected return false; } } i++; } // end while return true; } function IsEmpty(aTextField) { if ((aTextField.value=='') || (aTextField.value==null)) { return true; } else { return false; } } function ValidateForm(thsfrm,r1) { if (CheckRadio(thsfrm,r1)) { detone = 'document.thsfrm.detailone'; dettwo = 'document.thsfrm.detailtwo'; if(IsEmpty(detone) || IsEmpty(dettwo)) { if (confirm('You have not entered all details. Press OK to submit like this, Cancel to go back.')) { return true; } else { return false; } } else { return true; } } // end radios selected else { alert("Please select a pack option at step 2"); return false; } } </script> </head> <body> <form name="cart" id="cart" method="post" action="" onsubmit="return ValidateForm(this,'packoption');"> Enter your info to customise the product:<br><br> <input type="text" name="detailone" value="" size="25" maxlength="50"> <br>First name<br><br> <input type="text" name="detailtwo" value="" size="25" maxlength="50"> <br>Surname <br><br><br> Product One $10 <input type="radio" name="packoption" onclick="this.form.elements['my-item-name'].value='Product One $10';this.form.elements['my-item-id'].value='1';this.form.elements['my-item-price'].value='10.00';" /><br /> Product Two $15 <input type="radio" name="packoption" onclick="this.form.elements['my-item-name'].value='Product Two $15';this.form.elements['my-item-id'].value='2';this.form.elements['my-item-price'].value='15.00';" /><br /><br /> <i>OR Both</i> products for $20 (with same custom details) <input type="radio" name="packoption" onclick="this.form.elements['my-item-name'].value='Value Set';this.form.elements['my-item-id'].value='3';this.form.elements['my-item-price'].value='20.00';" /><br /> <input type="hidden" name="my-item-name" /> <input type="image" src="images/add-to-cart.gif" onmouseover="this.src='images/add-to-cart-hover.gif'" onmouseout="this.src='images/add-to-cart.gif'" name="my-add-button" value="add to cart" class="button" /> </form> </body> </html>

Complex form validation problem

halfway there, but miles from a solution...

rosie4tune

rosie4tune

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week