JQuery Validation не проверка на нажатие кнопки

Question

У меня есть следующие функции JavaScript:

$('div.nextStepBilling').click(function (e) { 
    if ($(this).parent().parent().attr("id") == "newCardDiv") { 
     $('form#myForm').validate({ 
      rules: { 
       cardHolder: "required", 
       cardNumber: { 
        required: true, 
        minlength: 15, 
        maxlength: 16 
       }, 
       CVV: { 
        required: true, 
        minlength: 3, 
        maxlength: 4 
       } 
      }, 
      messages: { 
       cardHolder: "Card holder name is required", 
       cardNumber: { 
        required: "Credit card number is required", 
        minlength: "Credit card must be at least 15 digits long", 
        maxlength: "Credit card must be at most 16 digits long" 
       }, 
       CVV: { 
        required: "CVV (security code) is required", 
        minlength: "CVV must be at least 3 digits long", 
        maxlength: "CVV must be at most 4 digits long" 
       } 
      } 
     }); 
     if ($('form#myForm').valid()) { 
      alert("valid"); 
     } else { 
      alert("invalid"); 
     } 
    } 
}); 

При нажатии на соответствующую div.nextStepBilling всегда оповещает в силе, даже если нет ничего в этих входов.

У меня нет ошибок в консоли, и я могу получить подтверждение для работы jquery, используя $('form#myForm').validate().element("#cardHolder"); У меня есть последние пакеты проверки jquery и jquery, которые включены (в правильном порядке) на странице. Может ли кто-нибудь увидеть что-то не так с вышеуказанным кодом?

Answer 1

Ваша проблема здесь:

$('div.nextStepBilling').click(function (e) { 
    if ($(this).parent().parent().attr("id") == "newCardDiv") { 
     $('form#myForm').validate({ 
      // rules & options 
      ... 

Поскольку .validate() лишь инициализации метод плагина, это нетестирование метод. Метод .validate() получает только вызванный на DOM готов инициализировать плагин с вашими правилами & вариантов. Все последующие вызовы игнорируются.

Вы должны использовать the .valid() method для программного запуска теста валидации по требованию.

Ваш код должен выглядеть следующим образом ...

$(document).ready(function() { 

    $('form#myForm').validate({ // initialize the plugin 
     // rules & options 
    }); 

    $('div.nextStepBilling').click(function (e) { 
     if ($(this).parent().parent().attr("id") == "newCardDiv") { 
      $('form#myForm').valid(); // triggers a test on the form 
      ... 

Простые ДЕМОС: http://jsfiddle.net/zSq94/ и http://jsfiddle.net/zSq94/1/