Rakesh Sharna Rakesh Sharna - 4 months ago 16
HTML Question

javascript onsubmit validation not working properly when I click on submit it ask expiry date & cvv

I have problem with onsubmit JavaScript function I set validation for cvv & expiry date. when I enter only cvv its submitted without entering date but when I enter date so its also asking cvv but in cvv case its not asking expiry date. kindly let me asap I have been stuck since yesterday.

<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>




Answer

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.

Please don't downvote or reject people's comments and answers because your code is wrong. Everyone gave you the correct answer. And also please present your code in a readable manner, I had to spend time on my own to correctly format it and fix various error that didn't relate to the question at hand.