> For the complete documentation index, see [llms.txt](https://docs.akinon.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.akinon.com/technical-guides/project-zero/django/page-types/checkout/masking-and-validation.md).
# 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)
{% hint style="info" %}
**Documentation:**
{% endhint %}
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 is`4+6+5` for Amex.
* **Disable masking:**
To disable masking, launch method `destroy` of `instance`. This action should be applied to variables defined when creating `Instance`s.
```
this.$cardInputMasked.destroy();
this.$cardCVVMasked.destroy();
```
## Validation (jquery-validation)
{% hint style="info" %}
**General Documentation:**
{% endhint %}
**Validate Method Documentation:**
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 `Instance`s.
```
this.validator.destroy();
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.akinon.com/technical-guides/project-zero/django/page-types/checkout/masking-and-validation.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.