JQuery validation-select required if checkbox checked

Question

using jquery I want to make a selection from a select box required (ie it can't be left as the blank default) if a particular checkbox is ticked. My code:

$(document).ready(function(){
  $("#myForm").validate({
    rules: {
      myDropDown: {
        required: {       
          depends: function(element) {
            return $("#myCheckbox:checked")
          }
        }
      }
    }
  })
})

The html:

<input type="checkbox" name="myCheckbox" id="myCheckbox" value="1">
<select name="myDropDown" id="myDropDown">
  <option value="" selected></option>
  <option value="1">Choice 1</option>
  <option value="2">Choice 2</option>
  <option value="3">Choice 3</option>
</select>

Not only is the code not working it's throwing out the jquery tabs that I have as the next section of javascript.

Any advice appreciated.

Edit: Now that I've sorted out all my brackets the behaviour now is that it's making the select box a required field whether or not the checkbox is checked - ie the depends part is not working. Other javascript on the page is now working ok.

Sorry, I'm using jquery.validate.min.js

Howard Shaw
– Howard Shaw

2011-07-04 16:25:22 +00:00
Commented Jul 4, 2011 at 16:25 — Howard Shaw
– Howard Shaw, Commented Jul 4, 2011 at 16:25

kleopatra · Accepted Answer · 2014-03-06 15:20:32Z

57

it should be able to work just like that:

rules : {
 myDropDown:{required:"#myCheckbox:checked"}
}

edited Mar 6, 2014 at 15:20

kleopatra

51.6k28 gold badges103 silver badges220 bronze badges

answered Mar 6, 2014 at 15:02

elle

5714 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gillytech Over a year ago

This does work, and is the standard method per the documentation: jqueryvalidation.org/category/methods/…

JGilmartin Over a year ago

this is the most simplest answer, and therefore the better way.

Adam Over a year ago

This should be the checked answer

robyaw · Accepted Answer · 2021-03-02 09:54:51Z

34

Please try like this

$(document).ready(function(){
  $("#myForm").validate({
    rules: {
       myDropDown:{
          required: function (element) {
             if($("#myCheckbox").is(':checked')){
                 var e = document.getElementById("myDropDown");
                 return e.options[e.selectedIndex].value=="" ;                            
             }
             else
             {
                 return false;
             }  
          }  
       }
    }
  });
});

edited Mar 2, 2021 at 9:54

robyaw

2,3182 gold badges23 silver badges31 bronze badges

answered Jul 5, 2011 at 5:01

Mahesh KP

6,47613 gold badges54 silver badges71 bronze badges

2 Comments

Howard Shaw Over a year ago

Hi, thanks but that still makes the dropdown required whether or not the checkbox is checked.

Mahesh KP Over a year ago

me edited the code.. please check it. added a return false in the else condition

Koen den Braven · Accepted Answer · 2011-10-07 07:38:20Z

8

This works like a charm

inputname:
{
    required: function(){
        if($("select[name=inputname]").val() == 1){
            return true;
        }
        else
        {
            return false;
        }
    }
}

You can edit the inputname to yours prefered.

To change it to input field, you can change the select part to input

answered Oct 7, 2011 at 7:38

Koen den Braven

891 silver badge1 bronze badge

3 Comments

quickshiftin Over a year ago

That could be compressed to required: function(){ return $("select[name=inputname]").val() == 1; }

Brock Hensley Over a year ago

Or rather: required: function(){ return $("#elementID").val() === 1; }

gillytech Over a year ago

Per the documentation (jqueryvalidation.org/category/methods/…) the proper method to use is rules : { myDropDown: required:{"#myCheckbox:checked"}}

Nicola Peluchetti · Accepted Answer · 2011-07-04 15:49:40Z

0

I don't know what plugin you are using, but

 return $("#myCheckbox:checked")

returns a Jquery object if your checkbox is checked. I think it would be more correct to do:

 return $("#myCheckbox").is(':checked')

which returns true or false.

Maybe this has nothing to to with your problem

answered Jul 4, 2011 at 15:49

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

2 Comments

Howard Shaw Over a year ago

The code is based on the second 'rules' example here: docs.jquery.com/Plugins/Validation/validate#toptions

Howard Shaw Over a year ago

Thanks, but changing the line you suggest allows no selection to be made when the checkbox is checked.

bhdrnzl · Accepted Answer · 2023-02-08 21:20:33Z

0

rules: {
    myDropDown: {
        required: function() {
            return $("input[id='checkbox']").val() == "1";
        }
    }
}

If the checkbox is checked here, it validates the myDropDown element.

OR

rules: {
    area1: {
        required: function() {
            return $("input[id='checkbox']").is(':checked');
        }
    },
    area2: {
        required: function() {
            return !$("input[id='checkbox']").is(':checked');
        }
    }
}

//return !$ or return $

both work fine..

edited Feb 8, 2023 at 21:20

answered Feb 8, 2023 at 21:10

bhdrnzl

611 gold badge3 silver badges7 bronze badges

Collectives™ on Stack Overflow

JQuery validation-select required if checkbox checked

5 Answers 5

3 Comments

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related