jquery - 使用 jQuery Validation 插件处理验证的正确方法是什么

Question

由于 jQuery Validation 插件不允许验证具有相同名称的字段，因此我编写了自己的逻辑，但它不起作用。我的表单中有几个字段，通过插件验证的和不通过插件验证的，我编写了以下代码：

$("#product_create").validate({
    rules: {
        "product[name]": {
            required: true,
            minlength: 10,
            maxlength: 50
        },
        "product[price]": {
            required: true,
            number: true,
            minlength: 2
        },
        "product[quantity]": {
            required: true,
            digits: true,
            minlength: 1
        },
        "product[description]": {
            required: true
        }
    },
    messages: {
        "product[name]": {
            required: "El nombre del producto no se puede dejar vacío",
            minlength: "El nombre del producto no puede tener menos de 10 carácteres",
            maxlength: "El nombre del producto no puede tener más de 50 carácteres"
        },
        "product[price]": {
            required: "Debes introducir un precio",
            number: "El precio debe ser un valor numérico o decimal"
        },
        "product[quantity]": {
            required: "Debes introducir una cantidad",
            number: "La cantidad debe ser un número"
        },
        "product[description]": {
            required: "Debes introducir una descripción del producto"
        }
    }
});

// Validate price in variation
is_valid = $("#product_create").valid();

console.log(is_valid);

if (is_valid) {
    $('#variations_holder input.pprice').each(function() {
        pprice = $.trim(this.value);
        if (!pprice.length) {
            alert('El precio de la variación no se puede dejar vacio!!!');
            $(this).focus();
            $(this).addClass('error');
            is_valid = false;
        } else if (!/^[1-9]\d*(\.\d+)?$/.test(pprice)) {
            $(this).addClass('error');
            is_valid = false;
        }
    });

    // Validate quantity in variation
    $('#variations_holder input.pqty').each(function() {
        pqty = $.trim(this.value);
        if (!pqty.length) {
            alert('La cantidad no se puede dejar vacia!!!');
            $(this).focus();
            $(this).addClass('error');
            is_valid = false;
        } else if (!/^[1-9]\d*$/.test(pqty)) {
            $(this).addClass('error');
            is_valid = false;
        }
    });
}

我有什么问题？

1. 如果rules字段 (product[name], product[price], product[quantity], product[description]) 未验证，则is_valid永远不会false
2. 因为第一个问题non rules是对具有类的字段进行验证.pprice，.pqty然后代码也通过此验证并显示警报，我不希望那样

我需要的是：

• 验证具有类的字段，.pprice并且.pqty仅当先前的验证正确时

任何人都可以给我一些提示或帮助吗？

更新

这是渲染的代码：

<section style="" id="variations_holder">
    <div class="con_var header">
        <div style="width: 14.2857%;">talla2</div>
        <div style="width: 14.2857%;">color2</div>
        <div style="width: 14.2857%;">color1</div>
        <div style="width: 14.2857%;">UPC</div>
        <div style="width: 14.2857%;">Precio</div>
        <div style="width: 14.2857%;">Cantidad</div>
        <div style="width: 14.2857%;">Foto</div>
    </div>
    <div class="con_var">
        <input value="Small" disabled="disabled" name="variation[content][]" style="width: 14.2857%;">
        <input value="Yellow" disabled="disabled" name="variation[content][]" style="width: 14.2857%;">
        <input value="Red" disabled="disabled" name="variation[content][]" style="width: 14.2857%;">
        <div style="width: 14.2857%;">
            <label class="pupc">UPC:</label>
            <input type="text" class="pupc" name="variation[pupc][]">
        </div>
        <div style="width: 14.2857%;">
            <label class="pprice">Precio:</label>
            <input type="text" class="pprice" name="variation[pprice][]">
        </div>
        <div style="width: 14.2857%;">
            <label class="pqty">Cantidad:</label>
            <input type="text" class="pqty" name="variation[pqty][]">
        </div>
        <div class="galery" style="width: 14.2857%;"><span></span>
            <div class="cont ps-container" style="">
                <ul>
                    <li class="more"></li>
                </ul>
                <div class="ps-scrollbar-x" style="left: 0px; bottom: 3px; width: 0px;"></div>
                <div class="ps-scrollbar-y" style="top: 0px; right: 12px; height: 0px;"></div>
            </div>
        </div>
    </div>
    <div class="con_var">
        <input value="Small" disabled="disabled" name="variation[content][]" style="width: 14.2857%;">
        <input value="Yellow" disabled="disabled" name="variation[content][]" style="width: 14.2857%;">
        <input value="Blue" disabled="disabled" name="variation[content][]" style="width: 14.2857%;">
        <div style="width: 14.2857%;">
            <label class="pupc">UPC:</label>
            <input type="text" class="pupc" name="variation[pupc][]">
        </div>
        <div style="width: 14.2857%;">
            <label class="pprice">Precio:</label>
            <input type="text" class="pprice" name="variation[pprice][]">
        </div>
        <div style="width: 14.2857%;">
            <label class="pqty">Cantidad:</label>
            <input type="text" class="pqty" name="variation[pqty][]">
        </div>
        <div class="galery" style="width: 14.2857%;"><span></span>
            <div class="cont ps-container" style="">
                <ul>
                    <li class="more"></li>
                </ul>
                <div class="ps-scrollbar-x" style="left: 0px; bottom: 3px; width: 0px;"></div>
                <div class="ps-scrollbar-y" style="top: 0px; right: 12px; height: 0px;"></div>
            </div>
        </div>
    </div>
</section>

这就是这段代码在渲染时的样子：