jQuery проверяет плагин с атрибутом data-encrypted-name для Braintree

Я реализую форму Braintree (платежный шлюз), которая требует, чтобы поля кредитной карты имели следующий атрибут: data-encrypted-name

Это моя форма:

<form id="braintree-payment-form">
    <input type="text" name="first_name" id="first_name" />
    <br/><br/>
    <input type="text" name="last_name" id="last_name" />
    <br/>    <br/>
    <input type="text" id="number" data-encrypted-name="number" />
    <br/><br/>
    <input type="text" id="cvv" data-encrypted-name="cvv" />
    <br/><br/>
    <input type="submit" />
</form>

Проблема в том, что при попытке проверить эти поля с помощью jQuery Validate проверка работает неправильно.

Это мой код (включая библиотеку qtip для отображения сообщений об ошибках):

$(document).ready(function() {

      $("#braintree-payment-form").validate({

        errorClass: "errormessage",
        errorClass: 'error',
        validClass: 'valid',
        rules: {
          "first_name": { required: true, maxlength: 45 },
          "last_name": { required: true, maxlength: 45 }                                          
          },
        messages: { 
          "first_name":       { required: "Enter your Name", maxlength: "Largo máximo de 45 caracteres" },
          "last_name":       { required: "Enter your Last Name", maxlength: "Largo máximo de 45 caracteres" }                                       
        },
        errorPlacement: function(error, element)
        {
          //qtip
          var elem = $(element),
            corners = ['right center', 'left center'],
            flipIt = elem.parents('span.right').length > 0;

          if(!error.is(':empty')) {
            elem.filter(':not(.valid)').qtip({
              overwrite: false,
              content: error,
              position: {
                my: corners[ flipIt ? 0 : 1 ],
                at: corners[ flipIt ? 1 : 0 ],
                viewport: $(window)
              },
              show: {
                event: false,
                ready: true
              },
              hide: false,
              style: {
                classes: 'ui-tooltip-blue'
              }
            })
            .qtip('option', 'content.text', error);
          }
          else { elem.qtip('destroy'); }
        },
        success: $.noop,
        debug: false
      });

$( "#number" ).rules( "add", {
        required: true,
    creditcard: true,
        messages: {
            required: "Credit Card Number is required",
        creditcard: "Invalid Credit Card Number"
  }
});

$( "#cvv" ).rules( "add", {
required: true,
        messages: {
            required: "CVV Invalid"
  }
});

  });

Имя и фамилия проверяются правильно, но если вы введете номер карты, первый номер будет проверен, а затем поле CVV повторяет то же самое сообщение проверки карты.

Посмотрите на эту ссылку: jsFiddle

Мой код основан на примере из этого ответа: jQuery проверяет плагин, добавляя несколько .rules () функция

Заранее спасибо!

Привет.