Foundation Abide validation with jQuery.payment library

Question

I have the following script which works ok: http://jsfiddle.net/asWeb/cxk47qen/2/

• if I click on submit when the form is empty I get the correct error messages
• if I type a correct card number (tested with a valid one) and then I click on submit again I shouldn't get the error message for card number input however I still do and that is my problem.

Hopefully I am using the correct Foundation validation syntax:

      <div class="large-4 columns form-group">
        <label for="cc-number" class="control-label">Card number formatting <small class="text-muted"><span class="cc-brand"></span></small></label>
        <input id="cc-number" type="text" class="card input-lg form-control cc-number" pattern="\d*" autocomplete="cc-number" placeholder="Card number" required>
         <small class="error">invalid</small>
      </div>

      <div class="large-4 columns form-group">
        <label for="cc-exp" class="control-label">Expiry formatting</label>
        <input id="cc-exp" type="text" class="input-lg form-control cc-exp" pattern="\d*" autocomplete="cc-exp" placeholder="Expires MM/YY" required>
        <small class="error">invalid</small>
      </div>

      <div class="large-4 columns form-group">
        <label for="cc-cvc" class="control-label">CVC formatting</label>
        <input id="cc-cvc" type="text" class="input-lg form-control cc-cvc" pattern="\d*" autocomplete="off" placeholder="Security code" pattern="cvv" required>
        <small class="error">invalid</small>
      </div>

I am using this library too as I needed something more consistent to check card numbers (Foundation lacks in that a bit) but that shouldn't interfere with my issue. I have the same problem even if I remove this library.