Form Validation - Enforcing Radio Button select before form completion

monique · 03-18-2004, 09:54 PM

I have a form that permits individuals to order documents, but before they can complete the actual order form, I need them to either "Agree" or "Disagree" via radio buttons that they are authorized to do so.

I've used Yaromat's Dreamweaver Form Validator extension to validate the actual order form fields, but it doesn't enable me to force the selection of the "Agree" radio button before the form can be completed (and submitted). I basically want the "Disagree" button to stop the individual in their tracks and provide a message that says something like, "In order to complete this order form, you must have the proper authorization to do so by the Owner". Of course, if individuals select "Agree", I want them to be able to proceed with filling out the form.

I would imagine that some JavaScript would do the trick, but I'm not quite there yet... (but learning fast thanks to this forum).

Here's the page URL: http://www.vancondo.com/docorder/rea...quest_test.htm

Let me know if a snippet of the code would be more helpful.

Thanks to any and all,
Monique

Willy Duitt · 03-19-2004, 12:34 AM

Here is a quick solution which will work as long as you do not place any more form elements before the agree radio button.

Code:

<script type="text/javascript">
 <!--//
  function agree(){
    if(!document.forms[0].elements[4].checked){
       alert('You must click agree to submit this form');
       return false;
     }
     else { return true };
   }
 //-->
</script>
<HEAD>

<BODY>
<FORM ACTION="http://www.vancondo.com/cgi-bin/FormMail.pl"
method="post" name="Realtor Doc Request" target="new"
onsubmit="return agree()">

.....Willy

Edit: BTW: I did not notice at first that you wanted to prevent a user from ever filling out the form unless they checked agreed. In that case, add onclick="agree()" to the body tag for another quick fix.

eg:

Code:

<BODY leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0" onclick="agree()">

monique · 03-19-2004, 06:57 AM

Thanks for your help.

I think all is well, except for I've got a duplicate attribute error in Dreamweaver because (I believe) the onsubmit="return agree()"
attribute is competing with the original form's validation markup, as shown below.

I hope this doesn't make what I'm trying to do impossible...

Perhaps I've just made an error?

<FORM ACTION="http://www.vancondo.com/cgi-bin/FormMail.pl" method="post" name="Realtor Doc Request" target="new" onsubmit="return agree()" onSubmit="YY_checkform('Realtor Doc Request','Declaration[0]','#q','2','Please select either \'Agree\' or \'Disagree\'.','Declaration[1]','#Requestor_First_Name','2','Please select either \'Agree\' or \'Disagree\'.','Requestor_First_Name','#q','0','Please complete the Requestor\'s First Name.','Requestor_Last_Name','#q','0','Please complete the Requestor\'s Last Name.','Owner_First_Name','#q','0','Please complete the Owner\'s First Name.','Owner_Last_Name','#q','0','Please complete the Owner\'s Last Name.','Company_Name','#q','0','Please complete the Company Name.','Requestor_Phone','#q','0','Please complete the Requestor\'s Phone Number.','Strata_Lot','#1_999','1','Please complete the Strata Lot Number.','Suite','#q','0','Please complete the Suite Number.','Req_Pick_Up_Date','^$[0-9][0-9]$\\-$[0-9][0-9]$\\-$[0-9]{4}$$#2#1#3','3','Please enter a valid date if RUSH charges apply $MM-DD-YYYY$.','Bldg_Address','10','1','Please complete the Building Address.');return document.MM_returnValue">

glenngv · 03-19-2004, 07:15 AM

Just move the codes in agree() to YY_checkform() function then have a single onsubmit handler.

Willy Duitt · 03-19-2004, 12:27 PM

Monique;

Just do as Glenn suggested but the test form page you posted a link too did not already have an onsubmit handler. If I would have known that, we would have done things differently.

Quote:

Additionaly, the body.onclick will throw an alert if the agree button is not checked and a user clicks your menu items.
If you do not want this, add the agree function to each form element, either onfocus or onclick.

.....Willy

monique · 03-22-2004, 02:57 PM

Hello again,

I now have the form set up to force the user to select the "Agree" button instead of the "Disagree" button, and (cool) they must select the "Agree" button before proceeding to complete the form. My problem now is the previous form validation isn't working (i.e. I can complete whatever fields I like, and click Submit successfully, witout having my error message pop up that says certain fields need to be completed). I'm not sure if the JS has affected the Check Form Validation extension (Dreamweaver) or not, but I don't imagine it should.

Here's what I have for my form validation since adding the JS to force clicking on the "Agree" radio button:

<FORM ACTION="http://www.vancondo.com/cgi-bin/FormMail.pl" method="post" name="Realtor Doc Request" target="new"onSubmit="return agree(); YY_checkform('Realtor Doc Request','Declaration[0]','#q','2','Please select either \'Agree\' or \'Disagree\'.','Declaration[1]','#Requestor_First_Name','2','Please select either \'Agree\' or \'Disagree\'.','Requestor_First_Name','#q','0','Please complete the Requestor\'s First Name.','Requestor_Last_Name','#q','0','Please complete the Requestor\'s Last Name.','Owner_First_Name','#q','0','Please complete the Owner\'s First Name.','Owner_Last_Name','#q','0','Please complete the Owner\'s Last Name.','Company_Name','#q','0','Please complete the Company Name.','Requestor_Phone','#q','0','Please complete the Requestor\'s Phone Number.','Strata_Lot','#1_999','1','Please complete the Strata Lot Number.','Suite','#q','0','Please complete the Suite Number.','Req_Pick_Up_Date','^$[0-9][0-9]$\\-$[0-9][0-9]$\\-$[0-9]{4}$$#2#1#3','3','Please enter a valid date if RUSH charges apply $MM-DD-YYYY$.','Bldg_Address','10','1','Please complete the Building Address.');return document.MM_returnValue">

And, here's the JS that the "Check Form" extension adds to my page:

function YY_checkform() { //v4.71
//copyright (c)1998,2002 Yaromat.com
var a=YY_checkform.arguments,oo=true,v='',s='',err=false,r,o,at,o1,t,i,j,ma,rx,cd,cm,cy,dte;
for (i=1; i<a.length;i=i+4){
if (a[i+1].charAt(0)=='#'){r=true; a[i+1]=a[i+1].substring(1);}else{r=false}
o=MM_findObj(a[i].replace(/\[\d+\]/ig,""));
o1=MM_findObj(a[i+1].replace(/\[\d+\]/ig,""));
v=o.value;t=a[i+2];
if (o.type=='text'||o.type=='password'||o.type=='hidden'){
if (r&&v.length==0){err=true}
if (v.length>0)
if (t==1){ //fromto
ma=a[i+1].split('_');if(isNaN(v)||v<ma[0]/1||v > ma[1]/1){err=true}
} else if (t==2){
rx=new RegExp("^[\\w\.=-]+@[\\w\\.-]+\\.[a-zA-Z]{2,4}$");if(!rx.test(v))err=true;
} else if (t==3){ // date
ma=a[i+1].split("#");at=v.match(ma[0]);
if(at){
cd=(at[ma[1]])?at[ma[1]]:1;cm=at[ma[2]]-1;cy=at[ma[3]];
dte=new Date(cy,cm,cd);
if(dte.getFullYear()!=cy||dte.getDate()!=cd||dte.getMonth()!=cm){err=true};
}else{err=true}
} else if (t==4){ // time
ma=a[i+1].split("#");at=v.match(ma[0]);if(!at){err=true}
} else if (t==5){ // check this 2
if(o1.length)o1=o1[a[i+1].replace(/(.*\[)|(\].*)/ig,"")];
if(!o1.checked){err=true}
} else if (t==6){ // the same
if(v!=MM_findObj(a[i+1]).value){err=true}
}
} else
if (!o.type&&o.length>0&&o[0].type=='radio'){
at = a[i].match(/(.*)\[(\d+)\].*/i);
o2=(o.length>1)?o[at[2]]

;
if (t==1&&o2&&o2.checked&&o1&&o1.value.length/1==0){err=true}
if (t==2){
oo=false;
for(j=0;j<o.length;j++){oo=oo||o[j].checked}
if(!oo){s+='* '+a[i+3]+'\n'}
}
} else if (o.type=='checkbox'){
if((t==1&&o.checked==false)||(t==2&&o.checked&&o1&&o1.value.length/1==0)){err=true}
} else if (o.type=='select-one'||o.type=='select-multiple'){
if(t==1&&o.selectedIndex/1==0){err=true}
}else if (o.type=='textarea'){
if(v.length<a[i+1]){err=true}
}
if (err){s+='* '+a[i+3]+'\n'; err=false}
}
if (s!=''){alert('The required information is incomplete or contains errors:\t\t\t\t\t\n\n'+s)}
document.MM_returnValue = (s=='');
}

Have I done something stupid, or would a total novice like me not have picked up on something that is making the "Check Form" validation not working?

Thx,
Monique

glenngv · 03-23-2004, 01:42 AM

YY_checkform() is not executed at all. Look at your code:

onSubmit="return agree(); YY_checkform(...);return document.MM_returnValue"

Any code after the return statement is not executed.

Try:

onsubmit="YY_checkform(...); return document.MM_returnValue && agree()"

With that solution, form validation is done first before checking if the agree button is ticked.

If you want the checking of the agree button first, you have to modify the YY_checkform() function. Change this line:

document.MM_returnValue = (s=='');

to:

return (s=='');

Then the onsubmit handler should be like this:

onsubmit="return agree() && YY_checkform(...)"

monique · 03-24-2004, 09:42 PM

Thank you Glenn & Willy. I really appreciate your help (and patience with me). It works beautifully.