Embarking on a challenge for a course. Required to perform credit card validation according to these specific guidelines:
You are establishing your own credit card company. You have devised a new method to validate credit cards using a straightforward function named validateCreditCard, which returns true or false.
These are the criteria for a valid number:
- The number must consist of 16 digits, all of which must be numbers - There must be at least two different represented digits (none of them can be identical) - The final digit should be even - The sum of all the digits should exceed 16
The following credit card numbers are deemed valid:
9999-9999-8888-0000
6666-6666-6666-1666
However, the following credit card numbers are considered invalid:
- a923-3211-9c01-1112 due to invalid characters
- 4444-4444-4444-4444 because there's only one type of number
- 1111-1111-1111-1110 as the sum is less than 16
- 6666-6666-6666-6661 with an odd final number
You will need to design a web form that permits users to input credit card numbers and instantly validate whether the credit card is valid upon any alterations, providing feedback to the user accordingly.
Tip: Before validating the input credit card number, eliminate the dashes from the input string (refer to split() and join() methods).
Extra Credit (5 points): Enhance your credit card scheme further! Specify the rules and identify some numbers that pass or fail. Suggestions: incorporate an expiration date check and explore the Luhn Algorithm for inspiration.
Below is the HTML code:
<!DOCTYPE>
<html>
<head>
<title>Credit Card Validation</title>
<!--Lisa Hergert's Extra Credit 1-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="extraCredit.js"></script>
</head>
<body>
<form name = "newForm">
<label for = "creditCard1">Card Number</label>
<input type = "text" name = "creditCard1" id = "creditCard1" placeholder = "XXXX-XXXX-YYYY-AAAA"
onChange = "validateCreditCard()" /><br />
...
...
</form>
</body>
</html>
As for the JavaScript (the code is outdated):
/**
* validCardNumber tests that Credit Card Number is XXXX-XXXX-YYYY-AAAA
* X, Y and A must only be digits
*/
function validateCreditCard() {
for (var i = 1; i < 7; i++) {
var cardNumber = document.getElementById("creditCard" + i);
var pattern = new RegExp("[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{3}[24680]{1}");
var res = pattern.test(cardNumber);
if (res) {
document.getElementById("message").style.color = 'green';
document.getElementById("message").innerHTML = "Card Number is Valid";
document.getElementById("creditCard" + i).style.color = "green";
} else {
document.getElementById("message").style.color = 'red';
document.getElementById("message").innerHTML = "Card Number is NOT valid";
document.getElementById("cardCard" + i).style.color = 'red';
}
}
}
I am attempting to devise a loop utilising i instead of creating numerous variables to reference the various form fields like creditCard1...2...3 etc.
An error I'm encountering reads as follows:
extraCredit.js:10 Uncaught TypeError: Cannot read property '1' of undefined
at validateCreditCard (extraCredit.js:10)
at HTMLInputElement.onchange (creditCardValidation.html:13)
Is there a more effective approach to address this issue?
With the revised code, I'm now facing a new error:
extraCredit.js:22 Uncaught TypeError: Cannot read property 'style' of null
at validateCreditCard (extraCredit.js:22)
at HTMLInputElement.onchange (creditCardValidation.html:14)