Interactive card details form

Community feedback

• 

  Alex Holguin•410

  @JAleXDesigNPosted over 1 year ago

  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
  	}
  }
  
  

  Marked as helpful

  0