JQuery validation-input text field to be required if checkbox checked

Question

I have the following checkbox:

<input type="checkbox" id="startClientFromWeb" name="startClientFromWeb" data-bind="checked: StartClientFromWeb" />

and the following input text field:

<input id="mimeType" name="mimeType" data-bind= "value: MimeType" />

This is my js validation code:

 $("#franchiseForm").validate({
            rules: {
                mimeType: {
                    required: $("#startClientFromWeb").is(":checked")
                }
            }
        });

I want the mimeType input text field to be required only if checkbox is checked. For some reason the above is not working. I am quite new to javascript and jquery. Any help with working example will be greatly appreciated. Thank You!

Sebastian · Accepted Answer · 2015-03-27 09:13:30Z

12

You can add your own custom validation methods to handle things like this:

$.validator.addMethod("requiredIfChecked", function (val, ele, arg) {
    if ($("#startClientFromWeb").is(":checked") && ($.trim(val) == '')) { return false; }
    return true;
}, "This field is required if startClientFromWeb is checked...");


$("#franchiseForm").validate({  
        rules: {  
            mimeType: { requiredIfChecked: true }  
        }  
 });

edited Mar 27, 2015 at 9:13

Sebastian

3691 silver badge13 bronze badges

answered May 21, 2012 at 14:18

ShaneBlake

11.1k2 gold badges28 silver badges43 bronze badges

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

2 Comments

Mdb Over a year ago

I tried your code. It gives me the following error: "Expected: :" for this line: mimeType: { requiredIfChecked } Can You please give the example in Fiddle ?

Mdb Over a year ago

Thank You! The problem was that I am applying the validations on $(document).ready and the value of the checkbox is always false. Now I apply the validations after ko.applyBindings call and it works as expected. Anyway thank You for your help.

archil · Accepted Answer · 2012-05-21 14:00:52Z

2

Validation will not triger if input is disabled. You could use that fact - let textbox be required, but initially disabled, and enable it only when checkbox is checked.

$(function () {
   $('#startClientFromWeb').change(function () {
        if ($(this).is(':checked')) {
            $('#mimeType').removeAttr('disabled');                
        }
        else {
            $('#mimeType').attr('disabled', 'disabled');
        }
    });
});

answered May 21, 2012 at 14:00

archil

39.6k7 gold badges69 silver badges83 bronze badges

1 Comment

Mdb Over a year ago

I have not disabled the #mimeType input.

Sadequer Rahman · Accepted Answer · 2021-01-28 16:48:50Z

0

The simpliest way which works:
rules : {mimeType:{required:"#startClientFromWeb:checked"}}, messages: {mimeType: {required: 'Repeat checked, To date required'}}

answered Jan 28, 2021 at 16:48

Sadequer Rahman

1335 silver badges11 bronze badges

Collectives™ on Stack Overflow

JQuery validation-input text field to be required if checkbox checked

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related