jQuery credit card input format

Question

I want to use jQuery validation for credit card input fields. When I seach for it I saw most people made this happen with additional validation methods.

I tried adding this to my code :

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script>

or this code :

jQuery.validator.addMethod("lettersonly", function(value, element) {
  return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please"); 

But I'm getting this error

Is this about a version problem, I use the jQuery 3.6 version and tried 1.7 and 1.9 versions for validation plugin.

Note: I'm sure that I use validation plugin after adding jQuery cdn. I can reach jQuery but not to jQuery.validator method.

Addition: I'm tring to format name-surname input field with only letters and spaces. If you can help me with that too, I would be glad.(Or is there a plugin prepared for every input field for credit card inputs.)

Edit:

The form I'm using right now.

<form id="cardForm">
    <div class="input-group">
        <div class="card-input-row row w-100 mt-5">
            <div class="col-12">
                <label for="card-number" class="mb-1 input-group-label">Card Number</label>
                <input id="card-number" pattern="\d*" maxlength="19" type="text" placeholder="••••  ••••  ••••  ••••" class="form-control w-100 shadow mb-3 input-group-inputs">
            </div>
            <div class="col-12">
                <label for="cardName" class="mb-1 input-group-label">Name</label>
                <input id="cardName" type="text" placeholder="••••••••  ••••••••" class="form-control w-100 shadow input-group-inputs mb-3">
            </div>
            <div class="row" style="padding-right: 0px ">
                <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-date" class="mb-1 input-group-label">Expiration Date</label>
                    <input id="card-date" type="text" placeholder="MM/YY" class="form-control w-100 shadow input-group-inputs">
                </div>
                <div class="col-2"></div>
                <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-cvc" class="mb-1 input-group-label">CVC</label>
                    <input id="card-cvc" type="text" placeholder="•••" class="form-control w-100 shadow input-group-inputs">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <button class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</form>

And the jquery example given added like:

$('#cardForm').validate({
    rules: {
        cardName: {
            required: true,
            lettersonly: true,
        },
    },
});

It does not give any errors but it doesn't work either.

Answer 1

I tried on below order and seems everything is ok wihtout any problem:

$("#cardName").on('input',function(event){
  const value = $(this).val();
  if (/^[A-Za-z]+$/gi.test(value) == false) {
    $(this).val(value.slice(0, -1));
  }
})

var month = 0;
$("#card-date").on('keypress',function(event) {
  if (event.charCode >= 48 && event.charCode <= 57) {
    if ($(this).val().length === 1) {
      $(this).val($(this).val() + event.key + "/");
    } else if ($(this).val().length === 0) {
      if (event.key == 1 || event.key == 0) {
        month = event.key;
        return event.charCode;
      } else {
        $(this).val(0 + event.key + "/");
      }
    } else if ($(this).val().length > 2 && $(this).val().length < 5) {
      return event.charCode;
    }
  }
  return false;
}).on('keyup',function(event) {
  if (event.keyCode == 8 && $("#card-date").val().length == 2) {
    $(this).val(month);
  }
})

<form id="cardForm">
  <div class="input-group">
    <div class="card-input-row row w-100 mt-5">
      <div class="col-12">
        <label for="card-number" class="mb-1 input-group-label">Card Number</label>
        <input id="card-number" pattern="\d*" maxlength="19" type="text" placeholder="••••  ••••  ••••  ••••" class="form-control w-100 shadow mb-3 input-group-inputs">
      </div>
      <div class="col-12">
        <label for="cardName" class="mb-1 input-group-label">Name</label>
        <input id="cardName" name="cardName" type="text" placeholder="••••••••  ••••••••" class="form-control w-100 shadow input-group-inputs mb-3">
      </div>
      <div class="row" style="padding-right: 0px ">
        <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
          <label for="card-date" class="mb-1 input-group-label">Expiration Date</label>
          <input id="card-date" type="text" placeholder="MM/YY" class="form-control w-100 shadow input-group-inputs">
        </div>
        <div class="col-2"></div>
        <div class="col-5" style="padding-right: 0px; padding-right: 0px;">
          <label for="card-cvc" class="mb-1 input-group-label">CVC</label>
          <input id="card-cvc" type="text" placeholder="•••" class="form-control w-100 shadow input-group-inputs">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <button class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.19.1/additional-methods.min.js"></script>