-2

For my homework, one of the things I need to do is create a form to fill in credit card details and have validation check on it. For the sake of simplicity, I'm just going to validate whether the numbers (Credit card number and CVV) are integers and whether they are within a certian range (to check the number of digits that have been input. So a CVV should not be smaller than 100 nor larger than 999).

EDIT: Here's my html code:

<form name="payment" action="thankyou.php" onsubmit="validation();" method="POST">
<--inputs here-->
<button type="submit" class="btn">Continue to checkout</button>
</form>

validation(){
var num=document.getElementByID("ccnum"); //num and ccnum are the credit card numbers
var safenum=document.getElementByID("cvv"); //cvv and safenum are the safety numbers

if (!(Number.isInteger(num)) || (num>9999999999999999) || (num<1000000000000000)){
     window.alert("Invalid credit card number.")
} //detect whether the credit card number is an integer, larger than 9999999999999999, smaller than 1000000000000000 or not
else if (!(Number.isInteger(safenum)) || (safenum>1000) || (safenum<100)){
     window.alert("Invalid credit card safety number.")
} //detect whether the safety number is an integer, larger than 999, smaller than 100 or not
else {
    window.open("thankyou.php")
} //the inputs are valid and the user is sent to another web page

When I click the form's submit button that runs function(), it simply reloads the page, instead of displaying any alert messages or redirecting to thankyou.php. Any idea how to rewrite my code?

Darren Wong
  • 41
  • 6
  • Your validation function may run properly, but submitting the form will redirect you, unless you stop that happening by preventDefault(). See the example in this answer: https://stackoverflow.com/a/17709172/11724378 – Andrew Jul 30 '19 at 10:34

3 Answers3

3

This is because your using form tags. When you press submit or presssing ENTER will submit your form. Just insert this code in form tag.

If your HTML is in this format,

<form action="thankyou.php" method="POST" 
         onsubmit="event.preventDefault(); validation();" id="myForm">
        <button type="submit" class="btn">Continue to checkout</button>
    </form>

Then add this line to your form tag.

 <form action="thankyou.php" method="POST" onsubmit="event.preventDefault(); validation();" id="myForm">

And Change your validation function to this.

function validation(){
    var num=document.getElementByID("ccnum"); //num and ccnum are the 
    credit card numbers
var safenum=document.getElementByID("cvv"); //cvv and safenum are the 
    safety numbers

    if (!(Number.isInteger(num)) || (num>9999999999999999) || (num<1000000000000000)){
         window.alert("Invalid credit card number.")
    } //detect whether the credit card number is an integer, larger than 9999999999999999, smaller than 1000000000000000 or not
    else if (!(Number.isInteger(safenum)) || (safenum>1000) || (safenum<100)){
         window.alert("Invalid credit card safety number.")
    } //detect whether the safety number is an integer, larger than 999, smaller than 100 or not
    else {
        myForm.submit();

    }
    }
shen4
  • 212
  • 1
  • 2
  • 15
  • I've inserted that code just now, however the submit button does not perform any action (not reloading or redirecting to anywhere ) – Darren Wong Jul 31 '19 at 13:51
  • Can you please add the html code as well. This is not a hard one probably some small thing is missing. It will be easy if u add html code. – shen4 Aug 01 '19 at 10:45
  • just added the button, however the results have not changed. The button still acts like . And adding event.preventDefault () still prevents the form from being submitted no matter what is inputted. – Darren Wong Aug 04 '19 at 03:05
  • Check it now. This has to work. I double checked it and executed successfully. – shen4 Aug 06 '19 at 03:39
  • Sorry, but that still didn't work too. event.preventDefault() still prevented anything from being sent. However, I decided to "borrow" some code from my classmate's work (Don't worry, it's perfectly fine). I just have to put oninput=return a(); in the credit card number input tag, then put the validations in function a(). I'll post an answer to it later – Darren Wong Aug 07 '19 at 04:13
2

You have to prevent the form submission or to execute your validation on submit/click.

See this.

pmaldera
  • 157
  • 7
0

I decided to check out my classmate's work, and "borrow" some code. (Don't worry, it's perfectly fine and he is okay with it). Here's the code:

For credit card number:

 <input type="text" id="ccnum" name="ccnum" required oninput="return a()">

For CVV:

<input type="text" id="cvv" name="cvv" required maxlength="4" minlength="3">

Here's the JavaScript code, which validates the credit card number with the Luhn algorithm. It is only valid by inputting numbers from those credit card number generators online:

function a(){
var b= document.getElementById("ccnum").value;
if (check(b)){
   document.getElementById("ccnum").style.border = "1px solid black";
   document.getElementById("ccnum").setCustomValidity("");
    return true;
}
else {
    document.getElementById("ccnum").style.border = "2px dashed red";
    document.getElementById("ccnum").setCustomValidity("Please enter a valid credit card number.");
    return false;
}
}
function check(ccnum) {

    var sum     = 0,
        alt     = false,
        i       = ccnum.length-1,
        num;
    if (ccnum.length < 13 || ccnum.length > 19){
        return false;
    }
    while (i >= 0){
        num = parseInt(ccnum.charAt(i), 10);
        if (isNaN(num)){
            return false;
        }
        if (alt) {
            num *= 2;
            if (num > 9){
                num = (num % 10) + 1;
            }
        } 
        alt = !alt;
        sum += num;
        i--;
    }
    return (sum % 10 == 0);
Darren Wong
  • 41
  • 6