jQuery Validate over two fields (checkbox and text field)

Question

I have 2 fields

<input type="text" name="num_gals" placeholder="Num of Gallons">
<input type="checkbox" value="TRUE"  name="full_tank">Full Tank?

I am using jquery-validation to enforce the following rule. Either the input field "num_gals" should have a non-zero value or the "full_tank" checkbox should be checked.

I tried the following but it doesn't seem to work.

rules:
{
    num_gals:   
    {
        required: function() 
        {
            if ($('.full_tank').val(':checked')) {
                return false;
            } else {
                return true;
            }
        }
    },
    full_tank:
    {
        required: function() 
        {
            if ($('.num_gals').val() == '') {
                return true;
            } else {
                return false;
            }
        }
    }
},

messages:
{
    num_gals:
    {
        required: 'Provide Num Gals or Check Full Tank'
    },
    full_tank:
    {
        required: 'Provide Num Gals or Check Full Tank'
    }
}

Would appreciate the help!

Community · Accepted Answer · 2017-05-23 12:28:21Z

1

You have the following mistakes...

$('.full_tank') is looking for a class called full_tank and in this case, there is no such class. You need to select the name attribute with $('input[name="full_tank"]'). Do the same for your other selector.
.val(':checked') is looking for a value of :checked and there is no such thing. To determine if it IS checked, use jQuery .is().
.val() == '' works ok, but it can be replaced with .is(':blank'), which also matches a field filled with whitespace characters thanks to the plugin's custom :blank selector.

Please review: jQuery Selector Reference and jQuery Validate Selector Reference.

Since your conditional function simply returns a boolean based on the result of a boolean, you can shorten it by just putting a return in front of the conditional.

rules: {
    num_gals: {
        required: function() {
            return ! ($('input[name="full_tank"]').is(':checked'));
        }
    },
    full_tank: {
        required: function() {
            return ($('input[name="num_gals"]').is(':blank'));
        }
    }
},

BTW: Your code is JavaScript, so it's best to avoid Allman code style, typically used with PHP, because JavaScript automatically inserts semicolons.

DEMO: http://jsfiddle.net/r4arpshm/

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Mar 16, 2015 at 4:06

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

rogerb Over a year ago

Thanks @Sparky. Really appreciate the detailed answer and explanation. Also many thanks for the tip on avoiding Allman style of coding.

rogerb Over a year ago

Do you know how to construct a rule such that both fields cant be allowed at the same time. i.e. num_gals cant be "non_blank" and full_tank cant be "checked" at the same time?

Sparky Over a year ago

@rogerb, you'll have to create a custom rule using the .addMethod() method. See docs: jqueryvalidation.org/jQuery.validator.addMethod

SagarPPanchal · Accepted Answer · 2015-03-16 04:53:01Z

0

Just replace this line

if ($('.full_tank').is(':checked')) {

answered Mar 16, 2015 at 4:53

SagarPPanchal

10.2k6 gold badges36 silver badges66 bronze badges

1 Comment

Sparky Over a year ago

The $('.full_tank') selector matches nothing in the OP's markup, since the OP is trying to use a class selector to grab the element by name.

Collectives™ on Stack Overflow

jQuery Validate over two fields (checkbox and text field)

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related