Card details form using flexbox

Community feedback

• 

  Denis•1,060

  @Mod8124Posted over 2 years ago

  Hi Good Job!

  Well, an easy way to check for validations is to create a regex, a match the value of the input with the regex this is going to return true or false so if true is valid otherwise it's invalid. Also, you add style to your validations(inputs) it's better that your inputs have a class over an id that let you do add style to the input easier because CSS has specificity

  For example

  Css

   .validation {
    background:red;
  }
  //if the input doesn't have a class (if the input has an id that id has priority) 
  
  .validation.card-holder-name-front {
   background:red;
  }
  //if the input has class = validation class + input class
  
  

  JavaScript

     const CardNum_input = const holderNameInput = document.querySelector('.card-holder-name-front');
  const CARDREGEX = ^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$
  
  if (  !cardNum_input.value.match(CARDREGEX) ) {
      cardNum_input.classList.add('validation');
  } else {
     cardNum_input.classList.remove('validation');
  }
  

  By the way, you can look for regex in google like regex for validation card number :)

  Marked as helpful

  1

  ---

  

  Tobani Esan-George•110

  @TobshubPosted over 2 years ago

  @Mod8124 Hi! Thanks for the feedback. I suspected JS was the best option for this, so thanks for the clear explanation!

  0