如果在 css 類上無效，則阻止表單提交

Question

嗨，我正在使用 jQuery 驗證，但是由於代碼中的限制，我試圖在特定的 css 類上進行驗證，我已經嘗試過：

    $.validator.setDefaults({
        submitHandler: function (form) {
            alert('submitted'); 
            form.submit();
        }
    });

    $('#shopLeft .cart').validate();


    $('.addon-wrap-7479-basics-0 .addon-custom').rules('add', {
        required: true,
        minlength: 2,
        maxlength: 20,
    });


    $('.addon-wrap-7479-description-2 .addon-custom-textarea').rules('add', {
        required: true,
        minlength: 2,
        maxlength: 20,
    });


    $('.addon-wrap-7479-upload-3 .addon-custom').rules('add', {
        required: true,
        minlength: 2,
        maxlength: 20,
    });


    $('.product-addon-nameproject .addon-custom').rules('add', {
        required: true
    });

任何人都可以幫忙。

Answer 1

您應該知道 jQuery Validate 插件的方法僅在選擇器包含多個元素時對第一個匹配的元素起作用。

我看到很多class在代碼中選擇，所以我不知道，如果你想每的每個實例不止一個元素目標.validate()和.rules() 如果是這樣，您還需要一個 jQuery .each() 。

// more than one form with class="cart"
$('#shopLeft .cart').each(function() { // more than one form with class="cart"
    $(this).validate();
});


// more than one field with class="addon-custom" within a class="addon-wrap-7479-basics-0"
$('.addon-wrap-7479-basics-0 .addon-custom').each() {
    $(this).rules('add', {
        required: true,
        minlength: 2,
        maxlength: 20,
    });
});