Magento 2.1 How to apply validation to custom credit card form?

Question

I have created my credit card form. Then when I will click on Place Order button

<div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrderClick,
                    attr: {title: $t('Place Order')}
                    ">
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>

placeOrderClick function which is written inside /view/frontend/web/js/view/payment/method-renderer/custom-method.js file is not called. And also please tell me how to validate credit card form.

Answer 1

This is happening because the sequence in define is

define(
[
    'jquery',
    'ko',
    'Magento_Checkout/js/view/payment/default',
    'Magento_Payment/js/view/payment/cc-form',     
    'Magento_Payment/js/model/credit-card-validation/validator',
    'mage/validation'           
],

and in function is

function ($, ko, Component)

not matches. Means

'jquery'->$,'ko'->ko,...like that

Above sequence is matched and my probem is solved.

For Validation use magento validation classes http://inchoo.net/magento/out-of-the-box-form-validation-in-magento/

/app/code/Nitesh/Module/view/frontend/web/template/payment/form.html use in form.html like:

<input name="cc_number" placeholder="Credit Card Number" type="text" data-validate="{'required-entry':true,
      'validate-cc-number':true, 'validate-number':true}">