How to correctly validate the credit card holder's name and marking incorrect entries as invalid?

Some one to help me improve my validateCardHolderName() function

image
html

<div data-cc-info>
	<input type="text" size="20" placeholder="Name Surname" />
</div>

validateCardHolderName function. Recall that its placeholder already suggests the required format, which is Name Surname (2 names separated by space). Each name should be at least 3 characters long. It should use the flagIfInvalid function to mark the field as valid or not and then return true or false depending on if the validation requirements are met or not.

  /* flagIfInvalid()
	      mark the input entry as invalid (strike-through) nor not. 
		*/
 const flagIfInvalid = (field, isValid) => {
        field.classList.toggle('is-invalid', !isValid)
};

 /*validateCardHolderName(),
	     use flagIfInvalid function to mark the field as valid or not and return true or false depending on the validity
		*/
	   const validateCardHolderName = () => {
		   const field = document.querySelector('[data-cc-info] input:nth-child(1)');
		   const validate = /^([A-Za-z]{3, })\s([A-Za-z]{3, })$/;
		   let isValid = validate.test(field.value);
		   if (isValid.length < 3) {
			   if (isValid.length === "") {
				   isValid = false;
			   } else {
					isValid = false;
			   }
		   } 

		   flagIfInvalid(field, isValid);
		   console.log(isValid);
		   console.log('name is valid');
		   return isValid;
}

Are you certain that [A-Za-z] is sufficient for this protocol?

RegExp.test() returns a boolean true or false. isValid will have no length.

What about names like 毛泽东 that do not even come close to the required format? What about the people, that have first/last names less than 3 characters? (there are enough people in the US having a single character last name)

see https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/

Well i’m assuming the OP is doing some sort of code course (which is why there’s an automator to give feedback).

The brief gives the definition of name in context of this script, but it does say 3 characters. Which, by its definition, “012 345” is a valid name.

Hi @m_hutley, sorry for my late response. Thanks for your positive reply

perhaps, still getting the same error message like before.

const validateCardHolderName = () => {
		   const field = document.querySelector('[data-cc-info] input:nth-child(1)');
		   const validate = /^([A-Za-z]{3, })\s([A-Za-z]{3, })$/;
		   let isValid = validate.test(field.value);
		   flagIfInvalid(field, isValid);
		   console.log(isValid);
		   console.log('name is valid');
		   return isValid;
 }

Hi @Dormilich, any improvement on my code will be great. Thanks

The correct syntax for “3 or more” is {3,} (no space)

Helpful for the future: https://regex101.com/

Hi @m_hutley, you’re a genius it worked for me. Thanks

Hi @m_hutley, any idea on this ???

image

html

<div data-cc-info>
	<input type="text" size="6" placeholder="MM/YY" />
</div>
 /* expiryDateFormatIsValid()
	     return true if the field's value compiles with MM/YY format or otherwise*/
	   const expiryDateFormatIsValid = (field) => {
		   const validate = /^(0[1-9]|1[0-2])\/([0-9][0-9])$/;
		   return validate.test(field.value);
}

and

 const validateCardExpiryDate = () => {
		   const field = document.querySelector('[data-cc-info] input:nth-child(2)');
	let isValid = expiryDateFormatIsValid(field);
	if (isValid) {
		const [MM, YY] = field.value.split('/');
		const date = new Date();
		const tM = date.getMonth() + 1;
		const tY = date.getYear() - 100;
		if (+YY >= tY) {
			if (+YY === tY) {
				console.log('data is invalid');
				if (+MM < tM) isValid = false;
			} 
		}else {
			isValid = false;
		}
	}
	flagIfInvalid(field, isValid);
	console.log(isValid);
	console.log('date is valid');
	return isValid;	   
}

Do you think the problem is with the regExp ??

The regex looks correct… what are you trying to do with the rest of the code?

Hi @m_hutley, well, am validating the credit card’s expiry date and marking incorrect entries as invalid.

If I said my CC expires on 12/99, what would your script say? Is that what it should say according to your brief?

It says that 12/99 is a valid date.

is 12/99 a valid date, according to you brief? Cause other than that, the code appears to be working as intended, other than your console logging.

Hi @m_hutley, a code improvement on my solution code is welcome. Thanks

You haven’t answered my question, so I have no advice to give you.
Your code, as written, should work, with the exception of throwing a console log message incorrectly when the year is the same and the month is later, and with the understanding that dates will be considered 20XX, so “99” means 2099, not 1999.

Actually, I tell a lie.

That field is not the 2nd child.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.