www.webdeveloper.com
Results 1 to 8 of 8

Thread: Checkbox makes a text field required

  1. #1
    Join Date
    Jan 2011
    Posts
    135

    Checkbox makes a text field required

    I have a checkbox named "sales" that I want to make a input field required only if it is checked. The input field name is "telephone". please help

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    In the form validation function:
    Code:
    if(document.forms["form name"].sales.checked) {
      if(document.forms["form name"].telephone.value.length < 12) { // xxx-xxx-xxxx
        alert("Please enter telephone number");
       }
    }

  3. #3
    Join Date
    Jan 2011
    Posts
    135

    hmmmm

    Its not working.

    my other form validation is in PHP, but i figured that this would be easier in javascript.

    I do have an email validation that the two email fields match eachother but here is the validation info thats within the head of the page.

    Than below that is the code for the text box and the checkbox.


    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 == '');
    } }
    
    
    //-->
    </script>
    <script type="text/javascript">
    
    if(document.forms["form1"].sales.checked) {
      if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
        alert("Please enter telephone number");
       }
    }
    </script>
    HTML Code:
    <td width="108"><div align="right"><font color="#000000" class="LargeBold12Cs-b">Telephone:</font></div></td>
            <td width="541"><input name="telephone" type="text" id="telephone" size="25">
      &nbsp;&nbsp;<font color="#000000" class="LargeBold12Cs-b">Ext:</font>
      <input name="extension" type="text" id="extension" size="25"></td>
          </tr>
          <tr valign="middle" class="style1">
            <td><div align="right"><font color="#000000" class="LargeBold12Cs-b">Fax:</font></div></td>
            <td><input name="fax" type="text" id="mobile" size="25"></td>
          </tr>
          <tr valign="middle" class="style1">
            <td><div align="right"><font color="#000000" class="LargeBold12Cs-b"> Application or Question:</font></div></td>
            <td><p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><b>
                <textarea name="comments" cols="60" rows="5" wrap="PHYSICAL" id="comments"></textarea>
              </b></font></p>
                
               
             </td>
          </tr>
          <tr bordercolor="#111111">
            <td colspan="2" height="6"><input type="checkbox" name="sales" value="Yes" id="sales">
              <font size="2">Please have a sales person call me.</font></td>

  4. #4
    Join Date
    Jan 2011
    Posts
    135

    help

    Wolf Shade am i doing anything wrong?

  5. #5
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Yes. As I stated, the code I wrote belongs
    In the form validation function:
    You have it sitting on its own, and without being surrounded by the function, it won't work (how can it do its job without being part of a function?)

    But I see that you are using the built in Macromedia validation. They do things differently than most. You _can_ surround my code with your own function name and call it from within the MM validation function; but I personally think you'd be better off writing your own based upon the model I supplied. Just MHO.
    Last edited by WolfShade; 03-25-2011 at 01:39 PM.

  6. #6
    Join Date
    Jan 2011
    Posts
    135

    hey

    I am not following what you are saying I understand giving it is own function name but how does that call the checkbox?

  7. #7
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    and call it from within the MM validation function
    If you want to try it (and I don't recommend it, because MM's validation is different from the way I do it), put my code in its own function (call it, say, "function validateCheckbox()") and then call that function from within function MM_validateForm().
    Code:
    function validateCheckbox() {
    if(document.forms["form1"].sales.checked) {
      if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
        return false;
       }
      else {
        return true;
       }
    }
    }
    function MM_validateForm() {
       .. blah blah blah..
       if(!validateCheckbox()) {
           errors+="If checkbox checked, please include telephone number";
         }
       }

  8. #8
    Join Date
    Jan 2011
    Posts
    135

    This is what i have....

    This is not working what am i doing wrong

    Code:
    <head>
    <script language="javascript" src="hide.js" type="text/javascript"></script>
    <script language="javascript" src="emailvalidation.js" type="text/javascript"></script>
    <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>  
    </head>
    
    <form name="form1" action="captcha11.php" "http://www.mark-10.com/cgi-bin/mailto" method="post" onsubmit="return ErrorCheck();">
    <INPUT TYPE="hidden" NAME="RECIPIENT" VALUE="dm@mark-10.com">
    <INPUT TYPE="hidden" NAME="subject" VALUE="Mark-10 Web Submit Form">
    <INPUT TYPE="hidden" NAME="THANKURL" VALUE="http://www.mark-10.com/thankyou-inquiry.html"> 
    <input type="hidden" name="identicalfields" value="email,email2">
    <input type="checkbox" name="sales" value="Yes" id="sales" onClick="return document.validateCheckbox">
    <form/>

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