JavaScript onsubmit validation not working properly when I click on submit it ask expiry date and CVV

Question

I have problem with onsubmit JavaScript function. I set validation for CVV and expiry date. When I enter only CVV it's submitted without entering date but when I enter date it's also asking CVV but in CVV case its not asking expiry date.

<form  name="card" method="post" onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);">
    <table>
      <tr>
        <td> Expiry Date
        <td>
        <td>
          <select  id="exMonth" title="select a month">
            <option value="0">Month
            </option>
            <option value="01">January
            </option>
            <option value="02">February
            </option>
            <option value="03">March
            </option>
            <option value="04">April
            </option>
            <option value="05">May
            </option>
            <option value="06">June
            </option>
            <option value="07">July
            </option>
            <option value="08">August
            </option>
            <option value="09">September
            </option>
            <option value="10">October
            </option>
            <option value="11">November
            </option>
            <option value="12">December
            </option>
          </select>
          <select   id="exYear" title="select a year">
            <option value="0">Year
            </option>
            <option value="2016">2016
            </option>
            <option value="2017">2017
            </option>
            <option value="2018">2018
            </option>
            <option value="2019">2019
            </option>
            <option value="2020">2020
            </option>
            <option value="2021">2021
            </option>
            <option value="2022">2022
            </option>
            <option value="2023">2023
            </option>
            <option value="2024">2024
            </option>
            <option value="2025">2025
            </option>
            <option value="2026">2026
            </option>
            <option value="2027">2027
            </option>
            <option value="2028">2028
            </option>
            <option value="2029">2029
            </option>
            <option value="2030">2030
            </option>
            <option value="2031">2031
            </option>
          </select>
        </td>
      <tr>
        <td>
          <span id="invalidexpiry">
          </span>
        </td>
      </tr>
      <tr>
        <td>
          CVV
          <input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" >
          <span id="usernameError">
          </span>
        </td>
      </tr>
      <tr>
        <td>
          <div id="centreimg">
            <input type="submit" name="S1" value="Submit response" />
          </div>
        </td>
      </tr>
    </table>
      </form>

function validateexpiry()
{
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday 
< today) {
        document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
        return false;
        }
        }
        // cvv
        function validate_cvv(cvv){
        var myRe = /^[0-9]{3,4}$/;
        if(cvv.value.match(myRe))
        {
        return true;  
        }  
        else (card.cvv.value.length==2)
        {
        document.getElementById('usernameError').innerHTML="Invalid CVV";//invalid cvv number
        return false;
        }
        }

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Recharge</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="header.css" text="text/css" rel="stylesheet">
      <script src="time.js" type="text/javascript"></script>
   <script src="jquery-2.2.3.min.js" type="text/javascript"></script>
      <style type="text/css"></style>
<body>
<form  name="card" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">


<table>
<tr>
<td> Expiry Date<td>
<td>
<select  id="exMonth" title="select a month">
<option value="0">Month</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<select   id="exYear" title="select a year">
 <option value="0">Year</option>
    
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option value="2030">2030</option>
    <option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" ><span id="usernameError"></span>
</td></tr>
 <tr>
 <td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />

</div>
</td>
</tr>
</form>

Possible duplicate of [Client-side validation of credit cards](http://stackoverflow.com/questions/255445/client-side-validation-of-credit-cards) — adampweb, Aug 04 '16 at 06:29
Show the code of `validateexpiry` and `validate_cvv` functions. — Jozef Chocholacek, Aug 04 '16 at 06:31
1. http://stackoverflow.com/questions/27054951/how-do-i-validate-a-credit-card-expiry-date-with-javascript 2. http://stackoverflow.com/questions/22729260/credit-card-expiry-date-validation-in-html 3. http://stackoverflow.com/questions/12011792/regular-expression-matching-a-3-or-4-digit-cvv-of-a-credit-card — adampweb, Aug 04 '16 at 06:31
@AdamP. He is not asking **how** to validate - his problem is unexpected behavior of the validation. — Jozef Chocholacek, Aug 04 '16 at 06:32
Kindly include the logic implemented in your validation functions `validateexpiry` and `validate_cvv` so we can help you — Can Ibanoglu, Aug 04 '16 at 06:46
@JozefChocholacek There are examples of working that I linked responses. In addition, the interviewer did not include performing the validation code, just HTML, so it is impossible to find out why their code does not work. — adampweb, Aug 04 '16 at 06:48
kindly check validateexpiry and validate_cvv i have given in comment — Rakesh Sharna, Aug 04 '16 at 10:50
Consider the possibility that if you are not an expert at this - and you need to try to make that assessment honestly - you should not be handling payment card numbers at all. Do you have another implement option that might expose your users to less risk? — halfer, Aug 17 '16 at 20:48

score 1 · Accepted Answer · edited Sep 16 '16 at 20:21

It's hard to give you a definite answer without seeing the code for validateexpirty and validate_cvv but my initial guess would be that your logic in validating is at fault:

onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);"

That should probably include && instead of ||.

The || operator works from left to right. That is, it will first evaluate validateexpiry() and if it returns true, rest of the expression will not be evaluated (because no matter what happens, the result will be true). If, on the other hand, it evaluates to false, only then the second part of the expression will be evaluated. This will keep on going until either a predicate returns true (in which case the expression will return true) or all predicates are evaluated to false (in which case the expression will return false).

EDIT: The answer is correct, the reason the answer doesn't work for you is because your CVV validation code is broken. After fixing up the HTML and JS snippets you posted in your question and comments here's what I have. It correctly works after fixing the errors.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Recharge</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css"></style>
<body>
<script>
function validateexpiry() {
    var today, someday;
    var exMonth=document.getElementById("exMonth").value;
    var exYear=document.getElementById("exYear").value;
    today = new Date();
    someday = new Date();
    someday.setFullYear(exYear, exMonth, 1);
    if (someday < today) {
        document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
        return false;
    }
    return true;
}


function validate_cvv(cvv) {
    var myRe = /^[0-9]{3,4}$/;
    if(cvv.value.match(myRe)) {
        return true;
    } else {
        document.getElementById('usernameError').innerHTML="Invalid CVV";
        return false;
    }
} 
</script>
<form  name="card" action="/" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">


<table>
<tr>
<td> Expiry Date<td>
<td>
<select  id="exMonth" title="select a month">
<option value="0">Month</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<select   id="exYear" title="select a year">
 <option value="0">Year</option>

    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option value="2030">2030</option>
    <option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" ><span id="usernameError"></span>
</td></tr>
 <tr>
 <td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />

</div>
</td>
</tr>
</form> 
</body>
</html>

Compare the corrected validation code to your version:

function validateexpiry()
{

    var today, someday;
    var exMonth=document.getElementById("exMonth").value;
    var exYear=document.getElementById("exYear").value;
    today = new Date();
    someday = new Date();
    someday.setFullYear(exYear, exMonth, 1);
    if (someday < today) {
            document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
    return false;

    }
}

function validate_cvv(cvv){

    var myRe = /^[0-9]{3,4}$/;
    if(cvv.value.match(myRe))
    {
        return true;  
    }  
    else (card.cvv.value.length==2)
    {
        document.getElementById('usernameError').innerHTML="Invalid CVV";
        return false;
    }

}

validateexpiry doesn't return if the value is correct, thus it returns undefined implicitly, which of course, evaluates to false in your onsubmit handler. There is also an error with how you create the selected date, it's always off by one but I didn't correct that.

validate_cvv has an outright syntax error. if ... else block's else doesn't take any conditions.

function validateexpiry() { var today, someday; var exMonth=document.getElementById("exMonth").value; var exYear=document.getElementById("exYear").value; today = new Date(); someday = new Date(); someday.setFullYear(exYear, exMonth, 1); if (someday < today) { document.getElementById('invalidexpiry').innerHTML="Invalid expiry date"; return false; } } — Rakesh Sharna, Aug 04 '16 at 10:41
// cvv function validate_cvv(cvv){ var myRe = /^[0-9]{3,4}$/; if(cvv.value.match(myRe)) { return true; } else (card.cvv.value.length==2) { document.getElementById('usernameError').innerHTML="Invalid CVV";//invalid cvv number return false; } } — Rakesh Sharna, Aug 04 '16 at 10:42
(Your advice about voting and readability is entirely right, but probably does not belong in an answer - answers are for a general audience but these remarks are for the OP only. Consider adding them to a comment under the question instead). — halfer, Aug 17 '16 at 20:50

score 0 · Answer 2 · answered Aug 04 '16 at 06:44

0

Should the validation be && instead of ||

onsubmit="return validateexpiry() && validate_cvv(document.card.cvv);"

answered Aug 04 '16 at 06:44

user5722923

33
1
5

not working I tried kindly look first answer comment section for validateexpiry() and validate_cvv – Rakesh Sharna Aug 04 '16 at 10:43

score -1 · Answer 3 · edited Aug 04 '16 at 07:41

-1

Can you post also the validation made validateexpiry() and validate_cvv(document.card.cvv).

But my initial guest is that it should be

 return validateexpiry() && validate_cvv(document.card.cvv);

Or your expiry date has default value 0 year and 0 month so validateexpiry might missed this one.

edited Aug 04 '16 at 07:41

jlapoutre

1,767
18
22

answered Aug 04 '16 at 06:47

Richard Urgelles

1
1

not working I tried kindly look first answer comment section for validateexpiry() and validate_cvv – Rakesh Sharna Aug 04 '16 at 10:43

JavaScript onsubmit validation not working properly when I click on submit it ask expiry date and CVV

3 Answers3