jQuery credit card input format-CodePudding

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 >
        <div >
            <div >
                <label for="card-number" >Card Number</label>
                <input id="card-number" pattern="\d*" maxlength="19" type="text" placeholder="••••  ••••  ••••  ••••" >
            </div>
            <div >
                <label for="cardName" >Name</label>
                <input id="cardName" type="text" placeholder="••••••••  ••••••••" >
            </div>
            <div  style="padding-right: 0px ">
                <div  style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-date" >Expiration Date</label>
                    <input id="card-date" type="text" placeholder="MM/YY" >
                </div>
                <div ></div>
                <div  style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-cvc" >CVC</label>
                    <input id="card-cvc" type="text" placeholder="•••" >
                </div>
            </div>
        </div>
        <div >
            <div >
                <button >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.

CodePudding user response：

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

function refineValue(event){
  const target = event.target;
  const value = target.value
  if(/^[A-Za-z] $/gi.test(value) == false){
    target.value = value.slice(0,-1)
  }
}

<form id="cardForm">
    <div >
        <div >
            <div >
                <label for="card-number" >Card Number</label>
                <input id="card-number" pattern="\d*" maxlength="19" type="text" placeholder="••••  ••••  ••••  ••••" >
            </div>
            <div >
                <label for="cardName" >Name</label>
                <input id="cardName" name="cardName" type="text" placeholder="••••••••  ••••••••"  oninput="refineValue(event)">
            </div>
            <div  style="padding-right: 0px ">
                <div  style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-date" >Expiration Date</label>
                    <input id="card-date" type="text" placeholder="MM/YY" >
                </div>
                <div ></div>
                <div  style="padding-right: 0px; padding-right: 0px;">
                    <label for="card-cvc" >CVC</label>
                    <input id="card-cvc" type="text" placeholder="•••" >
                </div>
            </div>
        </div>
        <div >
            <div >
                <button >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>

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