Card details form using flexbox

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 :)