запретить отправку формы, если она недействительна в классе css

#jquery #jquery-validate

#jquery #jquery-проверка

Вопрос:

Привет, я использую jQuery validate, однако я пытаюсь проверить определенные классы 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
    });
  

Кто-нибудь может помочь.

Комментарии:

1. В чем проблема с тем, что вы пробовали? Где находится соответствующая HTML-разметка вашей формы? В синтаксисе кода, который вы показываете, нет ничего плохого, поэтому мы ничего не сможем сделать, если вы не объясните это лучше.

2. Держу пари, что ваши селекторы jQuery сломаны, но мы не можем знать наверняка, если не видим разметку HTML.

Ответ №1:

Вы должны знать, что методы плагина jQuery Validate работают только с ПЕРВЫМ совпадающим элементом, когда селектор содержит несколько элементов.

Я вижу много class селекторов в вашем коде, поэтому мне интересно, пытаетесь ли вы настроить таргетинг более чем на один элемент для каждого экземпляра .validate() and .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,
    });
});