Masking & Validation

In order to obtain accurate data through the forms above the page, jquery-validation library is used for validation and inputmask library is used for masking.

Masking (inputmask)

Documentation: https://github.com/RobinHerbots/Inputmask

Masking in the checkout page matches the description in the library documentation.

Masking is used for card number only. For Amex or normal credit card, we deviate from standard and conduct controls.

• Standard use:

  // It should be used inside the constructor() method.
  this.$cardCVVMasked =
  new InputMask({ mask: '999' }).mask(this.$cardCVVInput[0]);

We limited CVC number with three digits and applied masking. Using the this.$cardCVVMasked description, we can easily conduct operations such as destory and update in the file by accessing instance.

• For credit card:

  // It should be used inside the constructor() method.
  this.$cardInputMasked =
  new InputMask({ mask: this.getCardNumberMask() }).mask(this.$cardInput[0]);

We applied getCardNumberMask method to mask card number. Using the this.$cardInputMasked description, we can easily conduct operations such as destory and update in the file by accessing instance.

getCardNumberMask = () =>
  getValue(selectCardType)?.slug === 'american-express' ?
    // if the card type is amex
    '9999 999999 99999' :
    // if not amex
    '9999 9999 9999 9999';

American Express (Amex) card numbers consist of 15 digits, while normal credit card numbers consist of 16 digits. Furthermore, while digit grouping format is 4+4+4+4 for normal credit cards, it is4+6+5 for Amex.

• Disable masking:

  To disable masking, launch method destroy of instance. This action should be applied to variables defined when creating Instances.

  this.$cardInputMasked.destroy();
  this.$cardCVVMasked.destroy();

Validation (jquery-validation)

General Documentation: https://jqueryvalidation.org/documentation/

Validate Method Documentation: https://jqueryvalidation.org/validate/

Validation in the checkout page matches the description in the library documentation.

• Usage example:

  // It should be used inside the constructor() method.
  this.validator = this.$creditCardForm.validate({
    // submitHandler runs when the conditions in rules match.
    submitHandler: (_, event) => {
      // Prevent the form working validly.
      event.preventDefault;
      // Clear the errors in the form.
      store.dispatch(clearErrors());
      // Complete the transaction.
      store.dispatch(completeCheckout());
      return false;
    },
    highlight: (element, errorClass, validClass) => {
      // If any form element cannot be validated;
      // Basically validClass is removed and errorClass is added.
      // All the work to indicate that the form element is not valid is done here.
    },
    unhighlight: (element, errorClass, validClass) => {
      // If any form element is valid;
      // Basically errorClass is removed and validClass is added.
      // All the work to indicate that the form element is valid is done here.
    },
    errorPlacement: (error, element) => {
      // If any form element cannot be validated;
      // All work is done here to display an error message after the element or elsewhere.
    },
    rules: {
      // Rule sets are defined here.
      card_number: {
        required: true,
        minlength: this.getCardNumberMinLength,
        normalizer: () => getValue(selectCardNumber),
      },
      card_cvv: {
        required: true,
        minlength: 3,
        normalizer: () => getValue(selectCardCVV),
      },
      // ... Other rule sets ...
    },
    messages: {
      // The messages of the rule sets are defined here.
      card_cvv: {
        required: 'Please Enter CVV',
        minlength: 'Please enter at least 3 digits.',
      }
      // ... Other rule sets ...
    }
  });

Using the this.validator description, we can easily conduct operations such as destory and update in the file by accessing instance.

• Disable validation:

  To disable validation, launch method destroy of instance. This action should be applied on the variable defined when creating Instances.

  this.validator.destroy();