javascript - 每个文本框的验证错误消息

Question

我这里有的是比较文本框值的验证。我有数量文本框和隐藏文本框，如果数量文本框低于隐藏文本框，错误消息将显示在跨度中。但问题是即使在其他具有正确值的跨度中也总是出现错误消息。

如下图所示，如果数量小于隐藏文本框，则会显示错误消息，但在另一个具有正确值的文本框中，仍会显示错误消息。帮忙？

$('.n_quantity,.pr_total').each(function () {
    var textBox1 = $(".n_quantity");
    var textBox2 = $(".pr_total");
    for (var i = 0, len = textBox1.length; i < len; i++) {
        if (parseInt(textBox2[i].value) > parseInt(textBox1[i].value)) {
            $(this).next("span.val_over").html("Over").addClass('validate');
            validation_holder = 1;
            return false;
        }
    }
});

<小时/>

<p>
    <label for="">PR Quantity</label>
    <input name="n_quantity[]" id="n_quantity" class="qty tb1 n_quantity" type="text" value="<?php echo $row['total_quantity'] ?>" />
    <span class="val_qty val_over"></span>
</p>
<p style="display:none;">
    <input id="pr_total" class="tb2 pr_total" type="text" value="<?php echo $row['total_quantity'];?>" readonly="readonly">
</p>

Answer 1

您可以迭代可编辑字段，然后遍历 dom 到相关元素:

$('.n_quantity').each(function () {
    var $this = $(this);
    var $total = $this.closest('p').next().find('.pr_total');

    if (parseInt($this.val(), 10) > parseInt($total.val(), 10)) {
        $this.siblings('.val_over').html('Over').addClass('validate');
        validation_holder = 1;
    }    
});