?
Solved

RegEx in Javascript

Posted on 2011-09-29
16
Medium Priority
?
328 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:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 6
16 Comments
 
LVL 4

Expert Comment

by:drain
ID: 36816509
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:Tom Knowlton
ID: 36816612
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:Tom Knowlton
ID: 36816635
 alert(result);
            e.preventDefault();

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

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

alert(result) says null

but the alert("validation failed"); does not fire.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Comment

by:Tom Knowlton
ID: 36816649
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
ID: 36816804
Yep. var result = null; should be above the switch statement.
0
 
LVL 4

Expert Comment

by:drain
ID: 36816840
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:Tom Knowlton
ID: 36816872
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:Tom Knowlton
ID: 36816890
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
 
LVL 4

Accepted Solution

by:
drain earned 2000 total points
ID: 36816992

            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:Tom Knowlton
ID: 36817185
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:Tom Knowlton
ID: 36817199
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:Tom Knowlton
ID: 36817209
Is this valid javascript syntax?

 if (!ccnumtext.match(pattern))
            {


!  for  (not)
0
 
LVL 4

Expert Comment

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

Author Comment

by:Tom Knowlton
ID: 36817318
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:Tom Knowlton
ID: 36817324
Nice work, and thank you for being patient.
0
 
LVL 4

Expert Comment

by:drain
ID: 36817330
Glad you got it working!
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

801 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