Hi; any one to help me resolve validateCardNumber function that failing to validate the card number instead throwing an error and yet the vlaidateWithLuhn() seems to be working fine.
Here are the inputs
<div data-cc-digits>
<input type="text" size= "4" placeholder="----" />
<input type="text" size= "4" placeholder="----" />
<input type="text" size= "4" placeholder="----" />
<input type="text" size= "4" placeholder="----" />
</div>
// My javascript
//vlaidateWithLuhn() function that it seems to be working fine.
const validateWithLuhn = (digits) => {
if (digits.length != 16) {
return false;
} else {
const len = digits.reverse().map((x, index) => (index % 2 == 1) ? x * 2 : x);
console.log(len);
const lastDigit = len.map(x => (x > 9) ? x - 9: x);
const sum = lastDigit.reduce((sum, x) => sum + x, 0);
if (sum % 10 == 0) {
console.log('This card No. is valid');
} else {
console.log('This card No. is Invalid');
}
return (sum % 10) == 0;
}
};
const addLeadingZeros = x => {
while (x.length < 4) x = "0" + x;
return x;
};
// validate card number is validating
const validateCardNumber = () => {
let digits = document.querySelectorAll('[data-cc-digits]')[0].children;
let inputFields = Array.from(digits);
let cardNumbers = inputFields.map(input => addLeadingZeros(input.value));
let numString = cardNumbers.toString().replace(/\D/g, "");
if (validateWithLuhn(numString)) {
if (digits.classList.contains('is-invalid')) {
digits.classList.remove('is-invalid');
console.log('Removed is-invalid')
}
return true;
} else {
digits.classList.add('is-invalid');
console.log('add is-invalid')
return false;
}
};
Any one with an idea how i can resolve this. Thanks
namwanzaronald4:
throwing an error
define. What error is it throwing?
mmh no, thats a link to this thread, where you don’t tell me what the error is.
that is the error message that am getting
namwanzaronald4:
throwing an error
is not ‘an error that you are getting’.
Syntax error: Index is not defined is javascript throwing an error. It tells me exactly what is wrong: I’ve not defined my index variable.
“its throwing an error” tells us nothing.
What does the console log when you execute this function?
Uncaught (in promise) TypeError: digits.reverse is not a function
at validateWithLuhn (<anonymous>:120:24)
at validateCardNumber (<anonymous>:141:10)
at 5LRCZiMHJysdZgHVNPUa.js:1134
at Array.map (<anonymous>)
at bulkCheck (5LRCZiMHJysdZgHVNPUa.js:1115)
at checkValidateCardNumberFn (5LRCZiMHJysdZgHVNPUa.js:1148)
at audit-utils.js:110
at audit-utils.js:87
at async https:/mygradr.web.app/engines/audit-utils.js:85
at async auditJavascript (audit-utils.js:126)
and
VM1073:182 TypeError: Cannot read property 'focus' of undefined
at uiCanInteract (<anonymous>:158:47)
at displayCartTotal (<anonymous>:172:5)
at <anonymous>:179:9
well see, there’s your problem then.
digits is a string.
Okay thanks, any suggestion of what i need to use.
Well considering map will also be expecting an array, you’d better turn your string into an array, right?
String.prototype.split
Though still getting this message
// validate card number
const validateCardNumber = () => {
const digits = document.querySelectorAll("[data-cc-digits]")[0].children;
const inputFields = Array.from(digits);
const cardNumber = inputFields.map(input => addLeadingZeros(input.value));
let numString = cardNumber.toString().replace(/\D/g, "");
let isValidCardNumber = validateWithLuhn(cardNumber);
if (isValidCardNumber) {
if (digits.classList.contains('is-invalid')) {
document.querySelector('[data-cc-digits]').classList.remove('is-invalid');
console.log('Removed is-invalid')
}
return true;
} else {
document.querySelector('[data-cc-digits]').classList.add('is-invalid');
console.log('Removed is-invalid')
return false;
}
console.log(cardNumber);
return isValidCardNumber;
};
and here is my console
Take a look at the values of lastDigit and sum and you might find out why.
This worked for me. thanks @m_hutley
const validateCardNumber = () => {
const div = document.querySelector('[data-cc-digits]');
const inputs = document.querySelectorAll('[data-cc-digits] input');
const values = [].map.call(inputs, input => input.value).join('');
const re = /^[0-9]{16}$/;
let isValid = re.test(values);
if (isValid) {
const digits = [...values].map(x => +x);
isValid = validateWithLuhn(digits);
}
flagIfInvalid(div, isValid);
return isValid;
};
system
November 4, 2019, 6:19pm
16
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
in the