check if input field is numeric and length with javascript

Question

With this java script I only allow numeric input which is fine. However I struggle to expand the function with 3 extra checks. I could use some help with java script please.

the 3 different checks needed are:

1) Credit Card Number = numeric and 16 in length otherwise error message

2) Expiry date = can only be select but needs to be equal or bigger than actual month/year

3) CCV = Numeric and 3 in length

This ones does block anything else then a numeric input:

<script type="text/javascript" >
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
    var keyCode = e.which ? e.which : e.keyCode
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    return ret;
}
</script>

for the length I tried:

function LengthCheck16() {
    var str = document.getElementById("CardNumber").value;
    var n = str.length;
    document.getElementById("CardNumber").innerHTML = n;
    if ((n > 16) || (n < 16))
    {
    document.getElementById("lblMessage").value = "Please enter a valid credit card number";
    }
}

I created a function with 2 functions in it but it did not work at all.

function CCLC16(e) {
IsNumeric(e);
LengthCheck16();
}

credit card number field

<td> <input type="text" id='CardNumber' name="EPS_CARDNUMBER" onkeypress="return IsNumeric(event);" ondrop="return false;" /></td>

==>> if I remove the span it does not work at all (I got the idea from somewhere else)

expiry date

  <td style="width: 130px"> <asp:Label ID="Label3" runat="server" Text="Expiry: "> </asp:Label></td>
         <td> <%--     Expiry Month/Year: <select name="EPS_EXPIRYMONTH">--%>
                <select name="EPS_EXPIRYMONTH">
                           <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
            <%--     <input type="text" name="EPS_EXPIRYYEAR" />--%>
                <select name="EPS_EXPIRYYEAR">
                    <option value="2014">2014</option>
                    <option value="2015">2015</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>
                </select></td>

CCV

<td>
                    <input type="text" name="EPS_CCV" style="width: 41px" onkeypress="return IsNumeric(event);" ondrop="return false;" /></td>

If someone can show me how to write this better even for only one function I appreciate the feedback.

Answer 1

After I have researched on the net and got tips on another website I have changed the approach slightly.

First I have disabled any other input than numbers:

 <td> <input type="text" id="CardNumber" name="EPS_CARDNUMBER" onkeypress="return IsNumeric(event);" /> </td>

// everything else then numeric answer is blocked
    function IsNumeric(e) {
    var specialKeys = new Array();
    specialKeys.push(8); //Backspace
    var keyCode = e.which ? e.which : e.keyCode
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    return ret;
}

I decided that I check the validation when someone pushes the submit button:

    // check when pushing submit button
    function CCValidation() {
        if (CreditCard()) { } else { return; }
        if (ExpiryDate()) { } else { return; }
        if (CVV()) { } else { return; }
    }

    // check for creditcard
     function CreditCard() {
        var CreditNumber = document.getElementById("CardNumber").value;
        if (LengthCheck(CreditNumber, 16)) { return true }
        else {
            alert("Please enter a 16-digit CreditCard Number");
            //document.getElementById('lblMessage').innerHTML = 'CC wrong';
            //return false;
        }
    }

    // verifying date
    function ExpiryDate() {
        //var ExpiryMonth = 
        //var ExpiryYear = 
        DateEntered = new Date((document.getElementById("ExpiryYear").value),((document.getElementById("ExpiryMonth").value)))*1;
        Today = new Date()*1;
        if (DateEntered <= Today) {
            alert("Your expiry date cannot be lower than todays's date!", DateEntered, Today);
            return false;
        }
        else { return true; }
    }

    // check for ccv
    function CVV() {
        var CCVValue = document.getElementById("CCV").value;
        if (LengthCheck(CCVValue, 3)) { }
        else {
            alert("Please enter a 3-digit CCV")
            return;
        }
    }

    // verifying length
    function LengthCheck(Value, Length) {
        if (String(Value).length != Length) { return false; }
        return true;
    }

</script>

Answer 2

Consider the following:

var a = 123;
var b = "123";

Those look the same in output, but, "a" is a number and "b" is a string. if you want to know the variable type of any variable, you can get it like this:

console.log(typeof a);
console.log(typeof b);

Values that come from form fields are usually of type string. To quickly check if a variable is numeric, regardless if it is actually string, or a number, you can check it like this:

if (!isNaN(b))
{ /* it is a number, do stuff*/ }

or

if(isNaN(b -1))
{ /* there maybe be some other characters in there*/ }