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 :

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.


    
        
            
                Card Number
                
            
            
                Name
                
            
            
                
                    Expiration Date
                    
                
                
                
                    CVC

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.

Saeed Shamloo · Accepted Answer

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);
  }
})


  
    
      
        Card Number
        
      
      
        Name
        
      
      
        
          Expiration Date
          
        
        
        
          CVC

jQuery credit card input format

Answers (1)

Related Questions