Validate required multiselect and checkbox on form

Discussion in 'JavaScript' started by loyalrogue, May 31, 2009.

  1. #1
    I need to do a clientside check of a form to see if a "required" multiselect list and a checkbox have been left blank or not.

    To clarify, the user is required to select either one or more options from the multiselect list, the checkbox, or a combination of both.

    What they can't do is leave both of them blank.

    Both the multiselect and the checkbox pass values to a PHPList script on the server as if they were one multiselect with the name "attribute17[]".

    ***Disclaimer - I am a total javascript noob and am piecing together examples from several days (and long nights) of googling.***

    I'm dealing with a very long subscribe form, and so far I've been successful with figuring out the code to validate emails, select dropdowns, and checkboxes.
    This combination multiselect and checkbox is the last piece of the form that is giving me trouble.
    Hopefully somebody here has a solution.

    For simplicity I've reduced the javascript and the form down to just the part I'm still having trouble with.
    Here is a piece of the javascript that I'm trying to use:
    <script language="Javascript" type="text/javascript">
    
    function checkform() {
      if(document.subscribeform.elements["attribute17[]"].value == "")
      {
        alert("Please select your Primary Work Locations");
        return false;
      }
    
      return true;
    
    }
    </script>
    Code (markup):
    Here is the section of the form that goes with it:
    <form method="post" action="mysite.com" name="subscribeform" onsubmit="return checkform();">
    * PRIMARY WORK LOCATIONS:<br>
    (Telephone Area Codes)
    <br>
    <br>
    Hold down CTRL while clicking to select more than one.
    <br>				
    <select name="attribute17[]" multiple size="7" class="attributeinput">
    <option value="1" >201	
    <option value="2" >202<option value="3" >203<option value="4" >205<option value="5" >
    206<option value="6" >207<option value="7" >208<option value="8" >209<option value="9" >
    210<option value="10" >212</select>	
    <br>
    or
    <input type=checkbox name="attribute17[]"  class="attributeinput" value="286"> 
    Check here if your business is Nationwide.
    <br>		
    <input type=submit name="subscribe" value="Submit Form" />
    </form>
    Code (markup):
    Any help, advice, insights, or hints would be greatly appreciated.
     
    loyalrogue, May 31, 2009 IP
  2. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #2
    Hope the following code helps.
    Not sure if it is what you needed.
    Do respond if any clarifications needed.

     
    Unni krishnan, Jun 1, 2009 IP
  3. loyalrogue

    loyalrogue Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the help, Unni.

    I didn't get a chance to try your code because I got a working snippet from Vic from vicsjavascripts.org.uk

    Here's his code that worked perfectly with my form:
    
    function checkform(){
     var ips=document.getElementsByName('attribute17[]');
     if (ips[0].selectedIndex<0&&!ips[1].checked){
      alert('Please make a selection.');
      return false;
     }
      return true;
    
    }
    Code (markup):
     
    loyalrogue, Jun 1, 2009 IP
  4. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #4
    Hi LoayalRogue,

    The code you got is perfect and precise.
    Thanks for posting it in the thread.
     
    Unni krishnan, Jun 1, 2009 IP