jQuery 基于 Next Prev 值的验证

Question

我运行遇到了这个问题，我通过单位和价格指定数量。如果给出单位，则还必须提供价格，如果给出价格，则还必须提供单位。但是都是空白，那就ok了。

+----------+-------+
| Quantity | Units |
+----------+-------+
|          |       |
+----------+-------+

我已经使用以下代码来检查这种情况，它确实适用于 classes 的第一个实例，但不适用于后续的实例。

$(".Quantity").rules("add",{
        required:function(element){
        return $(".Quantity").next('input').val() > 0;

    },
});

$(".Units").rules("add",{
        required:function(element){
        return $(".Units").prev('input').val() > 0;

    },
});

所以基本上它只检查 occu运行ce 的第一个值而不检查其余值。我想要的是它遍历整个页面并比较每个 occu运行ce 的上一个下一个值。在我的例子中，数据在 table 中 ar运行ged 并且每个单元格包含我想通过 prev next 检索的数量和价格输入框。但它不起作用。

Here is codepen demo。请注意，我在显示错误总数的示例中也使用了 bootstrap 对话框，它再次在 class 的第一个实例处停止，没有显示所有错误，因为我使用的是 class 为基础的规则。任何帮助将不胜感激。

Answer 1

使用此插件的方法时，当使用针对多个元素的选择器时，您必须将方法包含在 jQuery .each().. .

$(".Quantity").each(function() {
    $(this).rules("add",{
        required: function(element) {
            return $(".Quantity").next('input').val() > 0;
        },
    });
});

否则，当您不使用 each() 时，只会考虑第一个匹配元素。

Answer 2

我自己回答。我不得不使用以下代码来解决我的问题

$('.Units').each(function () {
    $(this).rules("add", {
        onkeyup: false,
        required: function (element) {
            return element.nextElementSibling.nextElementSibling.value > 0 ? true : false;
        },
    })
});

$('.Cost').each(function () {
    $(this).rules("add", {
        required: function (element) {
            return element.previousElementSibling.previousElementSibling.value > 0 ? true : false;
        },
    })
});

我使用的实际代码更复杂，prev 和 next 值相互依赖。

jQuery 基于 Next Prev 值的验证

jQuery Validation based on Next Prev values

javascript

jquery

jquery-ui

jquery-validate