SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validating checkbox fields

    Hi,

    I am trying to validate a checkbox selection but my code doesn't work. Here is the code I have:

    HTML Code:
    <form action="form.php" method="post" onsubmit="return validate(this);">
            Options:
    	<input type="checkbox" name="options[]" value="Option 1" /> Option 1<br />
    	<input type="checkbox" name="options[]" value="Option 2" /> Option 2<br />
    	<input type="checkbox" name="options[]" value="Option 3" /> Option 3
    	<input type="submit" name="submit" value="Submit" />
    </form>
    <script type="text/javascript">
    	<!--
    	function validate(form) {
    		if(form.options[0].checked==false && form.options[1].checked==false && form.options[2].checked==false) {
    			alert('Please check at least one of the options.');
    			return false;
    		}
    		return true;
    	}
    	//-->
    </script>
    Thanks for any help.

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    What error message(s) are you getting?

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No javascript errors.

    When I submit the form without selecting any of the checkboxes, the form script (form.php) gives an error:

    Invalid argument supplied for foreach()

    I collect options in an array with a foreach loop.

  4. #4
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ademmeda View Post
    No javascript errors.
    That's strange. When I copied and pasted your code into a html file and ran it, my FF and IE spat out an error. If you put an alert() inside and just below your IF block I think you'll find the alert() inside the IF block will never be executed, hence your form is always submitted whether you check any boxes or not.

    From that you should be able to figure out what the problem is with your IF condition.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ademmeda View Post
    No javascript errors.
    You *should* be getting JavaScript errors, but because the form gets submitted you won't see them.

    The error you would get if the form didn't submit anywhere is something along the lines of

    form.options is undefined

    you would have to amend your validate function to something like the below:

    Code javascript:
    function validate(form) {
        //The key here is that you get all the "options[]" elements in an array
        var options = document.getElementsByName("options[]");
     
        if(options[0].checked==false && options[1].checked==false && options[2].checked==false) {
            alert('Please check at least one of the options.');
            return false;
        }
        return true;
    }


    Quote Originally Posted by ademmeda View Post
    When I submit the form without selecting any of the checkboxes, the form script (form.php) gives an error:

    Invalid argument supplied for foreach()

    I collect options in an array with a foreach loop.
    In your PHP script you'll need to make sure that "options" isn't empty and has a length of at least 1 (you can use PHP's built in empty() and sizeof() functions for this)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    You *should* be getting JavaScript errors, but because the form gets submitted you won't see them.
    I was getting the js errors in both the IE9 and FF8 consoles while the function ran and before the form actually submitted.

    Also, you could loop through the checkboxes

    Code JavaScript:
    var opts = document.getElementsByName('options[]');
     
    for(i=0; i < opts.length; i++) {
          if(opts[i].checked) {return true;}
    }
    return false;

  7. #7
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help. I used the following combination and it works now.

    HTML Code:
    function validateChecks() {
    		var chks = document.getElementsByName('options[]');
    		var checkCount = 0;
    		for (var i = 0; i < chks.length; i++) {
    			if (chks[i].checked) {
    				checkCount++;
    			}
    		}
    		if (checkCount < 1) {
    			return false;
    		}
    		return true;
    	}
    	function validate(form) {
    		if(validateChecks()==false) {
    			alert('Please fill all the required fields.');
    			return false;
    		}
    		return true;
    	}


Bookmarks

Posting Permissions

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