Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation - Enforcing Radio Button select before form completion

    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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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()">
    Last edited by Willy Duitt; 03-19-2004 at 02:07 AM.

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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">

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Just move the codes in agree() to YY_checkform() function then have a single onsubmit handler.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    <FORM ACTION="http://www.vancondo.com/cgi-bin/FormMail.pl"
    method="post" name="Realtor Doc Request" target="new">
    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

  • #6
    New Coder
    Join Date
    Mar 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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(...)"
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    New Coder
    Join Date
    Mar 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Glenn & Willy. I really appreciate your help (and patience with me). It works beautifully.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •