jQuery form validation; field required if checkbox selected

Question

I'm currently working with this; http://www.geektantra.com/2009/09/jquery-live-form-validation/

I'm trying to add validation so if a user checks the Location box, the "L2" field would have to be required. How can I achieve this with this plugin? Would I have to mix in the checkbox expression?;

expression: "if (isChecked(SelfID)) return true; else return false;",

Here's the plugin functions

<script type="text/javascript">
            jQuery(function(){
                jQuery("#v1").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter your name"
                });
            });
</script>

Here's the form

<form method="post" id="contactform" action="/form.php" >
<h5>Category:</h5>
<p><input type="checkbox" name="Location" value="Checked" onclick="toggle_visibility('f1');"> <span class="a1">- Location</span><br><div id="f1" style="display:none">Where are you located?<br /><input name="L2" id="L2" type="text"  /></div></p>

<h5>Name:</h5>
<p><input name="Name" id="v1" type="text" /></p>
<p><div><input name="submit" type="submit" value="Submit"/></div></p>
</form>

Use depends option. You can read it on the jquery validation - options page. — Jules
– Jules, Commented Jun 8, 2012 at 5:35
I would use addEventListener and attachEvent instead of the inline on attributes. — Bailey Parker
– Bailey Parker, Commented Jun 8, 2012 at 5:38
@Jules I'm pretty new to java, I checked out the dependency option, added this with id inline '$("#Location").blur(function() { $("#L2").valid(); });' I'm wondering since I'm using that plugin from geektantra, would that make a difference in terms of how the functions are? — Jake
– Jake, Commented Jun 8, 2012 at 5:52
@PhpMyCoder Could attachevent be used to combine the toggle visibility code + the validation method same as "v1"? So it acts as a onclick — Jake
– Jake, Commented Jun 8, 2012 at 6:07
@Jake Yes. In jQuery: $('input[name="Location"]').click(function() { toggle_visibility('f1'); }); — Bailey Parker
– Bailey Parker, Commented Jun 8, 2012 at 6:10

mumair · Accepted Answer · 2016-05-17 15:12:24Z

3

Do you mean:

rules: {
      fieldName: {
        required: {       
          depends: function() {
            return $("input[name='checkbox']:checked")
          }
        }
      }
    }

edited May 17, 2016 at 15:12

mumair

2,83834 silver badges41 bronze badges

answered Jun 8, 2012 at 5:39

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

2 Comments

Jake Over a year ago

I'm a newbie with javascript, would that work with the plugin though? I tried as a test '$("#myinput").rules("add", { minlength: 2 });' but that didn't seem to work

mumair Over a year ago

or can try this $("input[name='checkbox']").is(":checked") and remove element un-used variable

gregdev · Accepted Answer · 2013-07-29 23:59:54Z

1

For some reason Sudhir's answer didn't work for me - I had to modify it:

rules: {
  fieldName: {
    required: {       
      depends: function(element) {
        return $("input[name='checkbox']:checked").length == 1
      }
    }
  }
}

answered Jul 29, 2013 at 23:59

gregdev

1,9733 gold badges25 silver badges30 bronze badges

Comments

Jules · Accepted Answer · 2012-06-08 08:13:26Z

0

Sudhir's answer is correct. All you have to do is use it as options when initialising the validation.

var opt = {};//copy from Sudhir's post of course change the field name as required.
$("form").validate(opt);

answered Jun 8, 2012 at 8:13

Jules

1,42313 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery form validation; field required if checkbox selected

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related