Solved

RegEx in Javascript

Posted on 2011-09-29
16
315 Views
Last Modified: 2012-05-12
Not very experienced in either Javascript or RegEx.

A - I want to set the RegEx string  (the pattern).

B - Then I want to compare what the customer provided to the pattern that I set in A.  Then take action if the provided input does not match the pattern:



My current pseudocode:


 switch (selectedText)
            {
                case "Visa":

/// set the reg ex pattern
/// compare to given number by customer
// do something if not a match to the pattern

                    break;
                default:
                    break;
            }




case "Visa": { ShoppingCreditCardPaymentOptions1.RegExprValidatorOneValidationExpression
= "^([4]{1})([0-9]{12,15})$"; } break;

case "Mastercard": { ShoppingCreditCardPaymentOptions1.RegExprValidatorOneValidationExpression
= "^([51|52|53|54|55]{2})([0-9]{14})$"; } break;

case "Discover Card": { ShoppingCreditCardPaymentOptions1.RegExprValidatorOneValidationExpression
= "(^(6011)\\d{12}$)|(^(65)\\d{14}$)"; } break;

case "American Express": { ShoppingCreditCardPaymentOptions1.RegExprValidatorOneValidationExpression
= "(^3[47])((\\d{11}$)|(\\d{13}$))"; } break;

case "Financial Aid": break;

default:
{ ShoppingCreditCardPaymentOptions1.RegExprValidatorOneValidationExpression = "^3(?:[47]\\d([
-]?)\\d{4}(?:\\1\\d{4}){2}|0[0-5]\\d{11}|[68]\\d{12})$|^4(?:\\d\\d\\d)?([ -]?)\\d{4}(?:\\2\\d{4}){2}$|^6011([
-]?)\\d{4}(?:\\3\\d{4}){2}$|^5[1-5]\\d\\d([ -]?)\\d{4}(?:\\4\\d{4}){2}$|^2014\\d{11}$|^2149\\d{11}$|^2131\\d{11}$|^1800\\d{11}$|^3\\d{15}$
";

0
Comment
Question by:knowlton
  • 10
  • 6
16 Comments
 
LVL 4

Expert Comment

by:drain
Comment Utility
var pattern = /^3(?:[47]\\d([
-]?)\\d{4}(?:\\1\\d{4}){2}|0[0-5]\\d{11}|[68]\\d{12})$|^4(?:\\d\\d\\d)?([ -]?)\\d{4}(?:\\2\\d{4}){2}$|^6011([
-]?)\\d{4}(?:\\3\\d{4}){2}$|^5[1-5]\\d\\d([ -]?)\\d{4}(?:\\4\\d{4}){2}$|^2014\\d{11}$|^2149\\d{11}$|^2131\\d{11}$|^1800\\d{11}$|^3\\d{15}$/
switch (selectedCard)
            {
                case "Visa":
/// set the reg ex pattern
pattern = /^([4]{1})([0-9]{12,15})$/
/// compare to given number by customer
                    break;
                default:
                    break;
            }

if (!cardNumber.math(pattern))
    // do something if not a match to the pattern
    alert("some error")
}
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
For some reason, the validation is not handling situations where validation fails:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><link href="App_Themes/stark/addoredit_control.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/booksearchstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/catalogstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/commonspot.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/contributorStyles.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/CWS.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/flyout.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/footer.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/giftcard_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/global.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/header.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/home.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/internal.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/loginpagestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/minicartstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/miniloginstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/orderdonestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/reset.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/searchpagestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shippingmethodstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shippingonetimeshipaddress_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shopping_header.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shopping_progress_steps_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingallowsubstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcartdetailstable_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcarttotal_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingccpayoptions_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcheckoutbuttons_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcheckoutpolicy_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingstepsinstructionsdisplay_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/topcartstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/useremailandphonestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/waitmessagestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/webmessageboxstyling.css" type="text/css" rel="stylesheet" /><title>
	jQuery Testing
</title>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.simplemodal-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.throbber.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#f1').blur(function ()
        {
            validateCCNum('#f1');
        });
    });

    function validateCCNum(a)
    {
        if ($(a).val() == "")
        {            
                $(a).css("border", "3px solid red");

                $(a).qtip({

                    content: $('#ccnumrequired'),
                    show: { ready: true 
                },
                hide: {
                    fixed: true,
                    delay: 180
                },
                style: {
                    width: { max: 500 },
                    padding: 5,
                    background: '#FEF8A9',
                    color: 'black',
                    textAlign: 'center',
                    border: {
                        width: 1,
                        radius: 5,
                        color: '#000'
                    }
                }


            });

        }
        else
        {
            var selectedText = $("[id*='dlPayCardType'] :selected").text();

            var ccnumtext = $(a).val();

            alert(selectedText);        

            switch (selectedText)
            {
                case "Visa":
                    alert("testing visa");
                    var visaregex = "^([4]{1})([0-9]{12,15})$";
                    var result = ccnumtext.match(visaregex);
                    break;
                default:
                    break;
            }


            alert(result);
            e.preventDefault();

            if (result == null)
            {
                alert("validation failed");
                $(a).css("border", "3px solid green");

                $(a).qtip({

                    content: $('#ccnuminvalid'),
                    show: { ready: true
                    },
                    hide: {
                        fixed: true,
                        delay: 180
                    },
                    style: {
                        width: { max: 500 },
                        padding: 5,
                        background: '#FEF8A9',
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 1,
                            radius: 5,
                            color: '#000'
                        }
                    }


                });


            }


        }
    }


</script>
















</head>
<body style="width: 400px; height: 500px; background-color: White;">
<form name="someform" method="post" action="WebFormJQuery.aspx" id="someform">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ2OTkzNDMyMWRk0ZQIeVe5xEibg0cu58coPu9f6ps=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['someform'];
if (!theForm) {
    theForm = document.someform;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgL8+LWcCAKM54rGBl4rTNlHEfmmOdq70swv+rKrLzr8" />

</div>
<br />
<br />
<br />
<br />
<select name="ctl00$ContentPlaceHolder1$ShoppingCreditCardPaymentOptions1$dlPayCardType"
id="ctl00_ContentPlaceHolder1_ShoppingCreditCardPaymentOptions1_dlPayCardType" style="width: 126px;">
<option value="NA">Please Select...</option>
<option value="CC">Visa</option>
<option value="CC">Master Card</option>
<option value="CC">Discover Card</option>
<option value="CA">Cash</option>
<option value="FA">Financial Aid</option>

</select>
<br />
<br />
<br />
<input id="Text3" type="text" size="20"><br />
<br />
<br />
<br />
<input id="f1" type="text" size="20"><br />
<input id="Text1" type="text" size="20"><br />
<br />
<input id="Text2" type="text" size="20"><br />
<input type="button" name="Button1" value="Button" onclick="javascript:__doPostBack('Button1','')" id="Button1" style="font-size:12px;" />
<div style="display: none;">
    <div id="ccnumrequired">
        <div style="position: relative; float: left;">

            <img src="Images/cancel_48.png" alt="x" />
        </div>
        <div style="position: relative; float: right; margin-top: 10px;">
            Required Field<br /><br />
            Credit Card number is required.
        </div>
    </div>
    <div id="ccnuminvalid">
        <div style="position: relative; float: left;">

            <img src="Images/cancel_48.png" alt="x" />
        </div>
        <div style="position: relative; float: right; margin-top: 10px;">
            Required Field<br /><br />
            Credit Card number is invalid.
        </div>
    </div>
</div>

</form>

</body>
</html>

Open in new window

0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
 alert(result);
            e.preventDefault();

            if (result == null)
            {
                alert("validation failed");

=====================================================

alert(result) says null

but the alert("validation failed"); does not fire.
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Yikes...I wonder if the problem is with the scope of result.  I don't declare it anywhere except inside the switch statement...
0
 
LVL 4

Expert Comment

by:drain
Comment Utility
Yep. var result = null; should be above the switch statement.
0
 
LVL 4

Expert Comment

by:drain
Comment Utility
but could also have result = ccnumtext.match(pattern); be outside of the switch. just use the switch to set the pattern. the call to match would be the same for any type of card.


var pattern
switch (selectedText)
            {
                case "Visa":
                    alert("testing visa");
// the slashes indicate it is a reg ex object. you don't need quotes.
                    pattern = /^([4]{1})([0-9]{12,15})$/;
                    break;
                default:
// you probably won't have a default really, unless you set one of the card types to be default
                   pattern = /nothing/
                    break;
            }


            e.preventDefault();

            if (ccnumtext.match(pattern))
            {
// match
} else
{
// no match
}
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Okay, I corrected the scope problem and still having trouble:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><link href="App_Themes/stark/addoredit_control.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/booksearchstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/catalogstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/commonspot.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/contributorStyles.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/CWS.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/flyout.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/footer.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/giftcard_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/global.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/header.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/home.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/internal.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/loginpagestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/minicartstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/miniloginstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/orderdonestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/reset.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/searchpagestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shippingmethodstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shippingonetimeshipaddress_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shopping_header.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shopping_progress_steps_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingallowsubstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcartdetailstable_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcarttotal_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingccpayoptions_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcheckoutbuttons_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingcheckoutpolicy_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/shoppingstepsinstructionsdisplay_styling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/topcartstyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/useremailandphonestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/waitmessagestyling.css" type="text/css" rel="stylesheet" /><link href="App_Themes/stark/webmessageboxstyling.css" type="text/css" rel="stylesheet" /><title>
	jQuery Testing
</title>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.simplemodal-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.throbber.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#f1').blur(function ()
        {
            validateCCNum('#f1');
        });
    });

    function validateCCNum(a)
    {
        if ($(a).val() == "")
        {            
                $(a).css("border", "3px solid red");

                $(a).qtip({

                    content: $('#ccnumrequired'),
                    show: { ready: true 
                },
                hide: {
                    fixed: true,
                    delay: 180
                },
                style: {
                    width: { max: 500 },
                    padding: 5,
                    background: '#FEF8A9',
                    color: 'black',
                    textAlign: 'center',
                    border: {
                        width: 1,
                        radius: 5,
                        color: '#000'
                    }
                }


            });

        }
        else
        {
            var selectedText = $("[id*='dlPayCardType'] :selected").text();

            var ccnumtext = $(a).val();

            var result = false;

            alert(selectedText);

            alert(ccnumtext);      

            switch (selectedText)
            {
                case "Visa":
                    alert("testing visa");
                    var visaregex = "^([4]{1})([0-9]{12,15})$";
                    result = visaregex.test(ccnumtext);
                    break;
                default:
                    break;
            }


            alert(result);
            e.preventDefault();

            if (result == true)
            {
                alert("validation failed");
                $(a).css("border", "3px solid green");

                $(a).qtip({

                    content: $('#ccnuminvalid'),
                    show: { ready: true
                    },
                    hide: {
                        fixed: true,
                        delay: 180
                    },
                    style: {
                        width: { max: 500 },
                        padding: 5,
                        background: '#FEF8A9',
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 1,
                            radius: 5,
                            color: '#000'
                        }
                    }


                });


            }


        }
    }


</script>
















</head>
<body style="width: 400px; height: 500px; background-color: White;">
<form name="someform" method="post" action="WebFormJQuery.aspx" id="someform">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ2OTkzNDMyMWRk0ZQIeVe5xEibg0cu58coPu9f6ps=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['someform'];
if (!theForm) {
    theForm = document.someform;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgL8+LWcCAKM54rGBl4rTNlHEfmmOdq70swv+rKrLzr8" />

</div>
<br />
<br />
<br />
<br />
<select name="ctl00$ContentPlaceHolder1$ShoppingCreditCardPaymentOptions1$dlPayCardType"
id="ctl00_ContentPlaceHolder1_ShoppingCreditCardPaymentOptions1_dlPayCardType" style="width: 126px;">
<option value="NA">Please Select...</option>
<option value="CC">Visa</option>
<option value="CC">Master Card</option>
<option value="CC">Discover Card</option>
<option value="CA">Cash</option>
<option value="FA">Financial Aid</option>

</select>
<br />
<br />
<br />
<input id="Text3" type="text" size="20"><br />
<br />
<br />
<br />
<input id="f1" type="text" size="20"><br />
<input id="Text1" type="text" size="20"><br />
<br />
<input id="Text2" type="text" size="20"><br />
<input type="button" name="Button1" value="Button" onclick="javascript:__doPostBack('Button1','')" id="Button1" style="font-size:12px;" />
<div style="display: none;">
    <div id="ccnumrequired">
        <div style="position: relative; float: left;">

            <img src="Images/cancel_48.png" alt="x" />
        </div>
        <div style="position: relative; float: right; margin-top: 10px;">
            Required Field<br /><br />
            Credit Card number is required.
        </div>
    </div>
    <div id="ccnuminvalid">
        <div style="position: relative; float: left;">

            <img src="Images/cancel_48.png" alt="x" />
        </div>
        <div style="position: relative; float: right; margin-top: 10px;">
            Required Field<br /><br />
            Credit Card number is invalid.
        </div>
    </div>
</div>

</form>

</body>
</html>

Open in new window

knowlton-506845.flv
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
but could also have result = ccnumtext.match(pattern); be outside of the switch. just use the switch to set the pattern. the call to match would be the same for any type of card.

============================

Not sure if I understand what you are saying.

For now, I am **only** testing for Visa cards.  Once I am confident that part is working, I'll add the other regex for the different cards.


Also, I did correct the pattern matching test.  I believe the following code is better:

 result = visaregex.test(ccnumtext);



BUT....


It is still not working, as you can see in my screencast above.
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Accepted Solution

by:
drain earned 500 total points
Comment Utility

            var pattern = /nothing/;

            switch (selectedText)
            {
                case "Visa":
                    pattern = /^([4]{1})([0-9]{12,15})$/;
                    break;
                        case "MasterCard":
                    pattern = /^some other expression$/;
                    break;
                default:
                    break;
            }


                  if (ccnumtext.match(pattern)) {
            alert("yes");
                  } else {
            alert("no");
                  }
            e.preventDefault();

The correct RegEx call is string.match(pattern). I'm not exactly sure why you got a positive result with what you had, but in any case it was incorrect... also the pattern should be in between slashes //

Hopefully the code shows you better what I was talking about -- you want the pattern defined once and changed for each of the different cards, and then you only want one line of code to test the pattern against the string.

0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
I have tried to make the changes according to your feedback.


Am I still doing this wrong?  It still does not work:


I will just show my updated javascript (the rest of the page markup is the same as before)

<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#f1').blur(function ()
        {
            validateCCNum('#f1');
        });
    });

    function validateCCNum(a)
    {
        if ($(a).val() == "")
        {            
                $(a).css("border", "3px solid red");

                $(a).qtip({

                    content: $('#ccnumrequired'),
                    show: { ready: true 
                },
                hide: {
                    fixed: true,
                    delay: 180
                },
                style: {
                    width: { max: 500 },
                    padding: 5,
                    background: '#FEF8A9',
                    color: 'black',
                    textAlign: 'center',
                    border: {
                        width: 1,
                        radius: 5,
                        color: '#000'
                    }
                }


            });

        }
        else
        {
            var selectedText = $("[id*='dlPayCardType'] :selected").text();

            var ccnumtext = $(a).val();

            var result = false;

            var pattern = /nothing/;

            alert(selectedText);

            alert(ccnumtext);      

            switch (selectedText)
            {
                case "Visa":
                    alert("testing visa");
                    pattern = /^([4]{1})([0-9]{12,15})$/;                    
                    break;
                default:
                    break;
            }
            
            if (ccnumtext.match(pattern))
            {
                alert("validation failed");
                $(a).css("border", "3px solid green");

                $(a).qtip({

                    content: $('#ccnuminvalid'),
                    show: { ready: true
                    },
                    hide: {
                        fixed: true,
                        delay: 180
                    },
                    style: {
                        width: { max: 500 },
                        padding: 5,
                        background: '#FEF8A9',
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 1,
                            radius: 5,
                            color: '#000'
                        }
                    }
                });
            }
        }
    }


</script>

Open in new window

0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
The alert:

 alert("testing visa");


does show up, so we are making it that far.

However, the alert for:

 alert("validation failed");

does not get triggered...


hang on...I think I see the problem....
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
Is this valid javascript syntax?

 if (!ccnumtext.match(pattern))
            {


!  for  (not)
0
 
LVL 4

Expert Comment

by:drain
Comment Utility
Yes: ! is JS for NOT. sorry should have clarified my if else...
0
 
LVL 5

Author Comment

by:knowlton
Comment Utility
I have it working now:

<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#f1').blur(function ()
        {
            validateCCNum('#f1');
        });
    });

    function validateCCNum(a)
    {
        if ($(a).val() == "")
        {            
                $(a).css("border", "3px solid red");

                $(a).qtip({

                    content: $('#ccnumrequired'),
                    show: { ready: true 
                },
                hide: {
                    fixed: true,
                    delay: 180
                },
                style: {
                    width: { max: 500 },
                    padding: 5,
                    background: '#FEF8A9',
                    color: 'black',
                    textAlign: 'center',
                    border: {
                        width: 1,
                        radius: 5,
                        color: '#000'
                    }
                }


            });

        }
        else
        {
            var selectedText = $("[id*='dlPayCardType'] :selected").text();

            var ccnumtext = $(a).val();

            var result = false;

            var pattern = /nothing/;

            alert(selectedText);

            alert(ccnumtext);      

            switch (selectedText)
            {
                case "Visa":
                    alert("testing visa");
                    pattern = /^([4]{1})([0-9]{12,15})$/;                    
                    break;
                default:
                    break;
            }
            
            if (ccnumtext.match(pattern) == null)
            {
                alert("validation failed");
                $(a).css("border", "3px solid green");

                $(a).qtip({

                    content: $('#ccnuminvalid'),
                    show: { ready: true
                    },
                    hide: {
                        fixed: true,
                        delay: 180
                    },
                    style: {
                        width: { max: 500 },
                        padding: 5,
                        background: '#FEF8A9',
                        color: 'black',
                        textAlign: 'center',
                        border: {
                            width: 1,
                            radius: 5,
                            color: '#000'
                        }
                    }
                });
            }
        }
    }


</script>

Open in new window

0
 
LVL 5

Author Closing Comment

by:knowlton
Comment Utility
Nice work, and thank you for being patient.
0
 
LVL 4

Expert Comment

by:drain
Comment Utility
Glad you got it working!
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now