Skip to content

Adding validation of credit card numbers #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bilinbs wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Adding validation of credit card numbers #5

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
952ca0c
Adding validation of credit card numbers
bilinbs Sep 7, 2024
e0246b6
Fixed validation
bilinbs Sep 7, 2024
837085a
Merge branch 'main' into fix-conflict
bilinbs Sep 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 63 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,13 +139,26 @@
background-color: #cccccc;
cursor: not-allowed;
}

.error {
color: #cc0101;
}
.group {
display: flex;
flex-wrap: wrap; /* Wrap the elements */
margin-top: 4px;
}
</style>
</head>
<body>
<h1>Pay Your Credit Card Bills via UPI. Generate UPI ID.</h1>
<input type="number" id="mobileNumber" placeholder="Enter 10-digit mobile number" maxlength="10">
<input type="text" id="creditCardNumber" name="creditCardNumber" placeholder="Enter 15 or 16-digit credit card number" maxlength="19" autocomplete="cc-number" inputmode="numeric">
<div class="group">
<input type="number" id="mobileNumber" placeholder="Enter 10-digit mobile number" maxlength="10">
<p id="mobileNumber_error" class="error" style="display: none;">Enter valid mobile number</p>
</div>
<div class="group">
<input type="text" id="creditCardNumber" name="creditCardNumber" placeholder="Enter 15 or 16-digit credit card number" maxlength="19" autocomplete="cc-number">
<p id="creditCardNumber_error" class="error" style="display: none;">Enter valid credit card number</p>
</div>
<button onclick="generateUPIIDs()">Generate UPI IDs</button>

<div id="upiIDs"></div>
Expand Down Expand Up @@ -184,15 +197,19 @@ <h2>UPI ID Formats</h2>
formattedValue += value[i];
}
e.target.value = formattedValue;
validateCardNumber(formattedValue.replace(/\s+/g, ''));
});

document.getElementById('mobileNumber').addEventListener('input', function(e){
let value = e.target.value;
validateMobile(value);
});
function generateUPIIDs() {
const mobileNumber = document.getElementById('mobileNumber').value;
const creditCard = document.getElementById('creditCardNumber').value.replace(/\s+/g, '');

if (mobileNumber.length !== 10 || (creditCard.length !== 16 && creditCard.length !== 15)) {
alert('Please enter a valid 10-digit mobile number and 15 or 16-digit credit card number.');
return;
if(!validate(mobileNumber, creditCard)){
return;
}

const last4Digits = creditCard.slice(-4);
Expand Down Expand Up @@ -249,6 +266,46 @@ <h2>UPI ID Formats</h2>
console.error('Failed to copy: ', err);
});
}

function validate(mobileNumber, creditCard) {
if ( !validateMobile(mobileNumber) || !validateCardNumber(creditCard)) {
alert('Please enter a valid 10-digit mobile number and 15 or 16-digit credit card number.');
return false;
}
return true;
}
function validateMobile(mobileNumber) {
var isValid = mobileNumber.length == 10;
showOrHideErrorOnField("mobileNumber", !isValid);
return isValid;
}
function validateCardNumber(cardNumber){
var isValid;
if(cardNumber.length !== 16 && cardNumber.length !== 15) {
isValid = false;
} else {
const cardNumberStr = cardNumber + "";
var sum =0;
var len = cardNumberStr.length ;
for(i=1; i<=len; i++){
sum += getSumForPosition(cardNumberStr[len-i], i%2==0 ) ;
}
isValid = sum%10 == 0;
}
showOrHideErrorOnField("creditCardNumber", !isValid);
return isValid;
}

function getSumForPosition(num, isDoubleDigit){
var n = parseInt(num);
n*= isDoubleDigit ? 2 : 1;
return (n%10) + Math.floor(n/10);
}
function showOrHideErrorOnField(elem, show){
document.getElementById(elem+"_error").style.display = show? "block" :"none";
document.getElementById(elem).setCustomValidity(show? "Invalid" : "");
document.getElementById(elem).reportValidity();
}
</script>
<div class="disclaimer">
<p>Please note that these UPI IDs are generated with best effort and should be checked for accuracy before making any payment. We will not be held responsible for any losses incurred due to incorrect UPI IDs generated by this tool.</p>
Expand Down