Interactive card details form

Hello, so that the errors disappear when the fields are full, you can perform a validation with the onblur event, if the field meets the validation requirements, you remove the error from said field. To validate the expiration date: Here is an example of how you can do it:

inputExpMonth.onblur = () => {
	//Since you are using an input type text you must convert the value to a number, if you use inputs type number this is not necessary
	const month = Number(inputExpMonth.value);
  
	//You check if it is a valid number with !isNaN() and also that it is between 1 and 12
	const isValidMonth = !isNaN(month) && month > 0 && month <= 12;

	if (!isValidMonth) {
		//if it is not valid
	}
}

inputExpYear.onblur = () => {
	const year = Number(inputExpYear.value);
	//Get the last two digits of the current year
  const actualYear = new Date().getFullYear() % 100;
  
	//check if it is a valid number and that it is greater than or equal to the current year
	const isValidYear = !isNaN(year) && year >= actualYear;
  
	if (!isValidMonth) {
		//if it is not valid
	}
}