Solved

RegEx in Javascript

Posted on 2011-09-29
16
327 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
Industry Leaders: 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 500 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

691 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