Skip to content

Latest commit

 

History

History
89 lines (57 loc) · 2.45 KB

README.md

File metadata and controls

89 lines (57 loc) · 2.45 KB
Raw

React: Payments Validation

Environment

  • React Version: 16.13.1
  • Node Version: 14(LTS)
  • Default Port: 8000

Application Demo:

Functionality Requirements

The component should perform the following validations in the form:

  • The card number input field should pass the following validations:

    • The field is required.
    • It should be a number consisting of exactly 16 digits.

  • The cardholder name input field should pass the following validations:

    • The field is required.
    • The name should contain english alphabetic letters only.

  • The expiration month input field should pass the following validations:

    • The field is required.
    • It should be a number consisting of exactly 2 digits with numbers in range of 01 to 12. (Denoting January to December)

  • The expiration year input field should pass the following validations:

    • The field is required.
    • It should be an year number consisting of exactly 4 digits, which is greater than or equal to current year and the difference from current year should be maximum 3 years.

  • The cvv/cvc input field should pass the following validations:

    • The field is required.
    • It should be a number consisting of exactly 3 digits.

  • Initially, the submit button should be disabled. When either field is invalid, the submit button should be disabled.

  • When all fields are valid and have been touched, the submit button should be enabled.

The following data-test-id attributes are required in the component for the tests to pass:

  • The card number input: 'numberInput'

  • The cardholder name input: 'nameInput'

  • The expiration month input: 'monthInput'

  • The expiration year input: 'yearInput'

  • The cvv/cvc input: 'cvvInput'

  • The submit button: 'submit-button'

  • The p containing the error message for:

    • the card number input: 'numberInputError'
    • the cardholder name input: 'nameInputError'
    • the expiration month input: 'monthInputError'
    • the expiration year input: 'yearInputError'
    • the cvv/cvc input: 'cvvInputError'

Please note that the component has the above data-test-id attributes for test cases and certain classes and ids for rendering purposes. They should not be changed.

Project Specifications

Read Only Files

  • src/App.test.js
  • src/App.js

Commands

  • run:
npm start
  • install:
npm install
  • test:
npm test