CODEWITHSUNDEEP
javascriptjqueryjquery-validate
lonerunner
lonerunner

Reputation: 1322

jQuery validation plugin conditional check if either input have value or select dropdown selected

So i am making some form with price and user is allowed either to select one of options from dropdown select box or either to put his own price in input value. He don't need both values but i would like to check if either of those 2 values is not meet and display error using jquery validation plugin.

So here is the form.

<div class="col-sm-12">
    <label  for="price">Price</label>
        <div class="form-inline">
            <div class="input-group">
                <div class="input-group-addon">€</div>
                <input type="text" class="form-control" name="price" id="price" placeholder="0" data-error="Please insert price for your item" required value="">
                </div>

                <strong class="text-center"> <?php _e('or') ?> </strong>

                <select class="form-control" id="conditional_price" name="conditional_price" placeholder="Select">
                <option value="" <?php echo $conditional_price == '' ? 'selected' : '' ?>>Select</option>
                <option value="1" <?php echo $conditional_price == '1' ? 'selected' : '' ?>>Free</option>
                <option value="2" <?php echo $conditional_price == '2' ? 'selected' : '' ?>>Deal</option>
                </select>
            </div>
            <label for="price" class="validation-error-message text-danger"></label>
            <label for="conditional_price" class="validation-error-message text-danger"></label>
</div>

I have tried various options but nothing works, this is what partially works so far

    rules: {
        offers: 'required',
        title: 'required',
        price: {
            required: function(element) {
                return $("#conditional_price").is(':empty');
            }
        },
        conditional_price: {
            required: function(element) {
                return $("#price").is(':empty');
            }
        }

    },

So on clicking submit button we should check if either of those two is valid. If user put the price than continue, if user put select than continue, but if none of those two is filled (if user don't put price and also don't select anything) to show error to either put price or select from dropdown.

Upvotes: 0

Views: 1154

Answers (1)

SRK
SRK

Reputation: 3496

Your code is correct except one thing. You are using select and is(":empty") with select will always return false. You can use this.

rules: {
        offers: 'required',
        title: 'required',
        price: {
            required: function(element) {
                return $("#conditional_price").val() == "";
            }
        },
        conditional_price: {
            required: function(element) {
                return $("#price").val() == "";
            }
        }

    },

$("#conditional_price").val() == "" will return true when the first option(with value="") is selected.

Upvotes: 2

Related Questions