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!

score 1 · Accepted Answer · edited May 23 '17 at 12:28

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/

Thanks @Sparky. Really appreciate the detailed answer and explanation. Also many thanks for the tip on avoiding Allman style of coding. — rogerb, Mar 16 '15 at 10:39
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? — rogerb, Mar 16 '15 at 20:42
@rogerb, you'll have to create a custom rule using the `.addMethod()` method. See docs: http://jqueryvalidation.org/jQuery.validator.addMethod/ — Sparky, Mar 16 '15 at 21:02

score 0 · Answer 2 · answered Mar 16 '15 at 04:53

0

Just replace this line

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

answered Mar 16 '15 at 04:53

SagarPPanchal

9,839
6
34
62

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`. – Sparky Mar 16 '15 at 06:14

jQuery Validate over two fields (checkbox and text field)

2 Answers2