www.webdeveloper.com
Results 1 to 15 of 15

Thread: Make a text field required when checkbox is selected.

  1. #1
    Join Date
    Jan 2011
    Posts
    135

    Make a text field required when checkbox is selected.

    I have an html form that has required feilds. The telephone field needs to be required only when a certain checkbox is selected. PLease help.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    It depends on your validation code, if you have one. Post the code. HTML included. Or a link to a test page

  3. #3
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    He's using the built-in MacroMedia form validator. I tried helping, earlier.

  4. #4
    Join Date
    Jan 2011
    Posts
    135

  5. #5
    Join Date
    Jan 2011
    Posts
    135
    First off i am a grl lol, second i asked u about what you told me and u never answered me lol

  6. #6
    Join Date
    Jan 2011
    Posts
    135
    Wolfshade can you look at the source if you click on the link, because I put in the code you told me to, but It not working which means i just put it in wrong.

  7. #7
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    First of all, my apologies for incorrectly assuming your gender. I try to not assume things, but I don't always succeed in that.

    Code:
    function MM_validateForm() { //v4.0
      if (document.getElementById){
        var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
        for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
          if (val) { nm=val.name; if ((val=val.value)!="") {
            if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
              if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
            } else if (test!='R') { num = parseFloat(val);
              if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
              if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
                min=test.substring(8,p); max=test.substring(p+1);
                if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
          } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
        } if (errors) alert('The following error(s) occurred:\n'+errors);
        document.MM_returnValue = (errors == '');
    } 
    
       if(!validateCheckbox()) {
           errors+="If checkbox checked, please include telephone number";
         }
    }
    Secondly, you have placed the call to validateCheckbox() after the "errors" variable is being referenced (which it does if there are any errors.) You need to insert the call to validateCheckbox before the line "if (errors) alert.." so that it can add to the errors variable IF the conditions are not met.

  8. #8
    Join Date
    Jan 2011
    Posts
    135

    Isnt that what i did here.

    Code:
    <script type="text/javascript">
    <!--
    function MM_validateForm() { //v4.0
      if (document.getElementById){
        var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
        for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
          if (val) { nm=val.name; if ((val=val.value)!="") {
            if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
              if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
            } else if (test!='R') { num = parseFloat(val);
              if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
              if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
                min=test.substring(8,p); max=test.substring(p+1);
                if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
          } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
        } if (errors) alert('The following error(s) occurred:\n'+errors);
        document.MM_returnValue = (errors == '');
    } 
    
       if(!validateCheckbox()) {
           errors+="If checkbox checked, please include telephone number";
         }
    }
    //-->
    </script>
    <script type="text/javascript"> 
    function validateCheckbox() {
    if(document.forms["form1"].sales.checked) {
      if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
        return false;
       }
      else {
        return true;
       }
    }
    }
    
        </script>

  9. #9
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    The code in blue needs to go before the code in red:
    Code:
    <script type="text/javascript">
    <!--
    function MM_validateForm() { //v4.0
      if (document.getElementById){
        var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
        for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
          if (val) { nm=val.name; if ((val=val.value)!="") {
            if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
              if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
            } else if (test!='R') { num = parseFloat(val);
              if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
              if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
                min=test.substring(8,p); max=test.substring(p+1);
                if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
          } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
        } if (errors) alert('The following error(s) occurred:\n'+errors);
        document.MM_returnValue = (errors == '');
    } 
    
       if(!validateCheckbox()) {
           errors+="If checkbox checked, please include telephone number";
         }
    }
    //-->
    </script>
    <script type="text/javascript"> 
    function validateCheckbox() {
    if(document.forms["form1"].sales.checked) {
      if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
        return false;
       }
      else {
        return true;
       }
    }
    }
    
        </script>
    If errors is appended with a warning AFTER it is checked, you won't see anything because it's done.

  10. #10
    Join Date
    Jan 2011
    Posts
    135
    The error message is coming up without even checking the checkbox. Than if i check the checkbox i do not have to put in the telephone number to submit the form.

  11. #11
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Hmm.. well, we are making progress. At least it's getting something into errors, even if not exactly as desired.

    Looking at the logic, I'm not sure where it's going awry.

    Try adding == true to the first conditional:
    Code:
    <script type="text/javascript"> 
    function validateCheckbox() {
    if(document.forms["form1"].sales.checked == true) {
      if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
        return false;
       }
      else {
        return true;
       }
    }
    }
    
        </script>

  12. #12
    Join Date
    Jan 2011
    Posts
    135
    wolf if you could check out what i talking about
    http://www.mark-10.com/inquiries2.html

    the error message doesnt come up however if i type the phone number in but i could do that without checking the checkbox.

  13. #13
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Aha.. I think I forgot an important part..
    Code:
    function validateCheckbox() {
    if(document.forms["form1"].sales.checked == true) {
      if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
        return false;
       }
      else {
        return true;
       }
    } else { return true; }
    }
    Hopefully, this will fix it.. it's only returning true or false IF the checkbox is checked.. if it's not checked, not returning anything is like returning false. That's where I got lost.. should be, anyway..

  14. #14
    Join Date
    Jan 2011
    Posts
    135
    i figured it had something to do with that, i dont get why you have to state return true twice.

  15. #15
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Quote Originally Posted by Designer525 View Post
    i figured it had something to do with that, i dont get why you have to state return true twice.
    The second return true is in case the checkbox is NOT checked. Not returning anything is the same as returning false. Returning false appends the errrors variable with more data giving the alert box.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles