CODEWITHSUNDEEP
jqueryregexvalidation
Mike Glaz
Mike Glaz

Reputation: 5382

jquery regex validation does not properly validate credit card field

I have a form with several fields. I'm using a forked jQuery Validation plugin because I'm using Font-Awesome's check mark’s and exclamation points next to validated fields. Apparently jQuery validation does not allow you to add more than one class to an element. Anyway, all my fields are being validated correctly except for my credit card validation. I have a simple regex (/^\d{16}$/) to check for 16 digits. The code I have is just not working.

HTML

<form id="checkout_form" method="post" action="">

Card Number:
<input id="credit_card_card_number" name="credit_card[card_number]" size="30" type="text" /><i class="fa fa-lg"></i>

<input type="submit">

jQuery

$(document).ready(function(){
  $('#checkout_form').validate({

    rules: {
      'credit_card[card_number]': {
        required: {
          depends: function(element) {
            var regex = /^\d{16}$/;
            return regex.test(element.value);
          }
        }
      }
    },
    validClass: "fa-check",
    errorClass: "fa-exclamation-triangle",
    errorPlacement: function(error, element) {
    },
    highlight: function(element, errorClass, validClass) {
      $(element).next().addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).next().removeClass(errorClass).addClass(validClass);
    }
  });
});

I put this up on http://jsfiddle.net/dUZy4/14/, but for some reason it won't compile there.

Upvotes: 0

Views: 338

Answers (1)

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

SOLUTION

I think you should change approach to achieve what you want.

If I were you, I would create new rule:

$.validator.addMethod(
    "legalCreditCard",
    function (value, element) {
        return this.optional(element) || /^\d{16}$/.test(value)
    },
    "Use a valid credit card number."
);

After that, you just have to use new rule, like standart required rule:

rules: {
    'credit_card[card_number]': {
        required: true,
        legalCreditCard: true
    }
},

Working JSFIDDLE example Try to remove rule legalCreditCard: true to see the difference.

Also, look for standart creditcard method in jQuery Validation plugin: http://jqueryvalidation.org/creditcard-method

WHY YOUR CODE DOESN'T WORK

You use depends condition. It is wrong. Look this:

Each rule can be specified as having a depends-property to apply the rule only in certain conditions.

That means, that rule will work only if something done. For exapmle, if checkbox checked.

Example:

$(".selector").validate({
    rules: {
        contact: {
            required: true,
            email: {
                depends: function(element) {
                    return $("#contactform_email:checked")
                }
            }
        }
    }
});

It is simple. Source

Ask me, if something is unclear for you.

Hope, this will help you.

Upvotes: 1

Related Questions