2

I am trying to add Credit card validations on Custom payment form

 <form id="testForm" data-mage-init='{"validation":{}}'>
            First name:<br>
            <input type="text" name="firstname" class="required-entry" >
            <br>
           credit card:<br>
            <input type="text" name="creditcard" class="required-entry validate-cc-number">
            CCV:<br>
            <input type="text" name="cvv" class="required-entry validate-cc-cvn">
            <br><br>
            <input type="submit" value="Submit">
        </form>

I have also added dependency for it

require([
    'jquery',
    'jquery.bootstrap',
    'payment',
    'mage/validation'
], function ($, bootstrap, payment, validation) { }

validate-cc-number is not working as expected when input is empty is gives error

Please enter a valid credit card number

but even if i input 'TestCard' as input it validates and shows no error , for cvv it does not even throws an error message

What am i missing ?

2

For Credit card validations to work you need to have input with value as card type

 <input type="hidden" value="" id="cc_type"> //value can VI,MC,AI,DN as per card entered
<input id="ccno" name="ccno" class="form-text form-control ccno validate-cc-number"
   data-validate="{
   'required-number':true,
   'validate-cc-number':'#cc_type',
   'validate-cc-type':'#cc_type'
   }"
   >
</div>

Same is required for CVV

<input name="cccvv" id="cccvv" class="form-text form-control cccvv "
   data-validate="{
   'required-number':true,
   'validate-cc-cvn':'#cc_type'
   }">
</div>

and for expriry date check

<select name="cc_exp_month" id="cc_exp_month" class="cc_exp_month"
   data-validate="{
   'required':true,
   'validate-cc-exp':'#cc_exp_yr'
   }"
   > //put year select as required and in month vlidation put year select id .Magento expects in format of YYYY
<select name="cc_exp_yr" id="cc_exp_yr" class="form-select form-control cc_exp_yr" data-validate="{required:true}">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.