javascript - jQuery 验证插件条件检查输入是否有值或选择下拉列表

Question

因此，我正在制作某种包含价格的表格，并且允许用户从下拉选择框中选择选项之一，或者将自己的价格放入输入值中。他不需要这两个值，但我想检查这两个值中的任何一个是否不满足并使用 jquery 验证插件显示错误。

这是表格。

<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>

我尝试了各种选项，但没有任何效果，这是到目前为止部分有效的

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

    },

因此，在单击提交按钮时，我们应该检查这两个中的任何一个是否有效。如果用户输入价格而不是继续，如果用户输入选择而不是继续，但如果这两个都没有填写(如果用户不输入价格并且也不选择任何内容)，则会向输入价格或从下拉列表中选择显示错误.

Answer 1

除了一件事之外，您的代码是正确的。您正在使用 select ，并且 select 的 is(":empty") 将始终返回 false。你可以使用这个。

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

    },

$("#conditional_price").val() == "" 当选择第一个选项(值为“”)时将返回 true。