ASP.NET

Re: Fire Validation Summary in textbox blur

3-May-12 8:03

Hi All,

I have validation controls on my page and I am using ValidationSummary to show them. But ValidationSummary is displaying messages only when submit button is clicked.

Is there any way to show the ValidationSummary messages immediately after coming out of the control (like onblur). Is there any way to show the user that "This is required field", but the message should be displayed in the ValidationSummary not in the RequiredField validator.
Eventhough I am using RequiredField validator, but when its showing the message its spoiling the page alignments.

So I want to show it in the ValidationSummary but onblur of that particular control.

Is there any way please, anybody please help me, I am desperately need of it please, I am googling too.

Thanks in advance.

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

R. Giskard Reventlov3-May-12 9:34

R. Giskard Reventlov

3-May-12 9:34

Start here[^].

"If you think it's expensive to hire a professional to do the job, wait until you hire an amateur." Red Adair.
nils illegitimus carborundum

me, me, me

Re: Fire Validation Summary in textbox blur

Joshua Omundson3-May-12 9:44

Joshua Omundson

3-May-12 9:44

I beleive the Validation Summary fires when a post back is attempted. Here[^] is an article that might help.

To get around the page alignment issue, I put an asterisk in the RequiredField Validator text property. That way when the onblur even fires, you will have a little red star appear, which shouldn't affect your layout too much.

Jquery Run Time Error: jquey.validator

indian1433-May-12 5:04

3-May-12 5:04

Hi,

I have a web page in which I kept jquery validations. I have kept all these validations in a separate function and calling that function from pageLoad, because I have update panel in the form.
There: are three .js files I am including in it, at one .js file it is saying that "run time error: jquery.validator is null"

I am not understanding why its saying like that, the paths are also correct only, because its not showing error in the script tag at src.

Any help to resolve this please, I have been googling for two days, but no much help. Any link you know or any suggestion, code snippet example anything pls its urgent. I am new to jquery world.

Thanks,
Abdul

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

jkirkerx3-May-12 7:03

3-May-12 7:03

Basically, your JQuery does not work correctly. It doesn't matter that you have 1, 2 or 3 files.

I don't see any code posted here, So let's see your code for Page.Load() and the first 20 lines of your validator jQuery File, not the master JQuery file or the plugin JQuery File.

indian1433-May-12 13:58

3-May-12 13:58

Hi,

Here is the code that I used in jquery, it is giving error at jquery.validate.creditcard2.js, saying jquery.validate is null, when I commented that script tag completely, it was giving me error like object not found. And I am using update panel for the whole content page.

Is there any help that anybody can give me, really really am in need and am new for the jquery technology.

 <script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>    
    <script type="text/javascript" src="../../Script/Payment.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.creditcard2.js"></script>

 <script type="text/javascript">
$.fn.paymentpagevalidation = function() {
        var cardholdernameValid = false;
        var confirmationValid = false; 

                        $(function ($) {
        $("#cardnum").ForceNumericOnly();
    });

                            $(function ($) {
        $("#ccMonth").ForceNumericOnly();
    });
    
                                $(function ($) {
        $("#ccYear").ForceNumericOnly();
    });

                                $(function ($) {
        $("#securityCode").ForceNumericOnly();
    });
      
       $('.validationGroup .causesValidation').click(function (evt) {

    // Ascend from the button that triggered this click event 
    //  until we find a container element flagged with 
    //  .validationGroup and store a reference to that element.
    var $group = $(this).parents('.validationGroup');
 
    var isValid = true;
 
    // Descending from that .validationGroup element, find any input
    //  elements within it, iterate over them, and run validation on 
    //  each of them.
    $group.find(':input').each(function (i, item) {

    if($(item)[0].id != "")
    {  
      if($(item)[0].id != "address2")
      {
          if (!$(item).valid())
          {
            isValid = false;
          }
      }
    }
  });
 
    if (!isValid)
      evt.preventDefault();
  });

$.validator.addMethod("dropDownValidator", function (value, element, parameters) {         
if (value == '-1'){
return false;
}
else
return true;
});          

$.validator.addMethod("monthValidator", function (value, element, parameters) {         
if ((value < 1) || (value > 12)){
return false;
}
else if((value >= 1) || (value <= 12)){
return true;
}
else{
return false;
}
}); 

$("#securityCode").click(function () {    
    if($("#rblPaymentType input[type=radio]:checked").val()=="AmEx")
    {
        $("#securityCode").attr('maxlength','4'); 
    }
    else
    {
        $("#securityCode").attr('maxlength','3'); 
    }
});

$.validator.addMethod("securityCodeValidator", function (value, element, parameters) {         
    if($("#rblPaymentType input[type=radio]:checked").val()=="AmEx")
    {
        if($("#securityCode").val().length == 4)
        {
            return true;
        }
        else
        {
          return false;
        }
    }
    else
    {
        if($("#securityCode").val().length == 3)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});     
                       
        $('#form').validate({       
           
            rules: {
                 <%= cardholdername.UniqueID %>: {
                    required: true,
                    minlength: 1
                },
                 <%= address1.UniqueID %>: {
                    required: true,
                    minlength: 1
                },
                 <%= city.UniqueID %>: {
                    required: true,
                    minlength: 1
                },
                 <%= postcode.UniqueID %>: {
                    required: true
                },
                 <%= ccMonth.UniqueID %>: {
                    required: true,
                    minlength: 2,                   
                    number: true,
                    monthValidator: true                  
                },
                 <%= ccYear.UniqueID %>: {
                    required: true,
                    minlength: 2,
                    number: true
                },
                 <%= securityCode.UniqueID %>: {
                    required: true,
                    minlength: 3,
                    number: true,
                    securityCodeValidator: true
                },
                <%= rblPaymentType.UniqueID %>: {
                    required: true
                },
                <%= cardnum.UniqueID %>: {
                required: true,
                number: true
                },
                <%= ddlCountry.UniqueID %>: 
                {                                         
                    dropDownValidator: true                 
                },
                <%= ddlState.UniqueID %>: 
                {                                         
                    dropDownValidator: true                 
                }
            },
            messages: {
                <%= cardholdername.UniqueID %>: {
                    required: "Please provide your Cardholder Name",
                    minlength: "Your Cardholder Name must be at least 1 characters long" 
                },
                <%= address1.UniqueID %>: {
                    required: "Please provide your Address1",
                    minlength: "Your Address1 must be at least 1 characters long" 
                },
                <%= city.UniqueID %>: {
                    required: "Please provide your City",
                    minlength: "Your City Number be at least 1 characters long" 
                },

                <%= postcode.UniqueID %>: {
                    required: "Please provide your Postal Code"
                },
                <%= rblPaymentType.UniqueID %>: {
                    required: "Please select Credit Card Type"
                },
                <%= ccMonth.UniqueID %>: {
                    required: "Please confirm your Credit Card Month",
                    minlength: "Your Credit Card Month must be at least 2 digits long",
                    number: "Provide only digits for the month",
                    monthValidator: "Invalid Month"                 
                },
                <%= ccYear.UniqueID %>: {
                    required: "Please confirm your Credit Card Year",
                    minlength: "Your Credit Card Year must be at least 2 digits long",
                    number: "Provide only digits for the year"
                },
                <%= securityCode.UniqueID %>: {
                    required: "Please confirm your Security Code",
                    minlength: "Your Security Code must be at least 3 digits long",
                    number: "Provide only digits for the security code",
                    securityCodeValidator: "Please provide 4 digits for AmEx card"
                },
                <%= cardnum.UniqueID %>: {
                    required: "Please enter your Credit Card number",
                    number: "Provide only digits for the credit card number"
                },
                <%= ddlCountry.UniqueID %>: {
                dropDownValidator: "Please Select Country"
                },
                <%= ddlState.UniqueID %>: {
                dropDownValidator: "Please Select State"
                }
            },
            errorElement: "li",
            errorLabelContainer: "#errorMessage",
            onsubmit: false

        });

        //validate on change

        $("#cardholdername").blur(function () {       
            var elemTest = $("#cardholdername").valid();
        });

        $("#address1").blur(function () {
            var elemTest = $("#address1").valid();
        });

         $("#city").blur(function () {
            var elemTest = $("#city").valid();
        });

        $("#ddlState").blur(function () {
            var elemTest = $("#ddlState").valid();
        });

        $("#ddlCountry").blur(function () {
            var elemTest = $("#ddlCountry").valid();
        });

        $("#postcode").blur(function () {
            var elemTest = $("#postcode").valid();
        });

        $("#ccMonth").blur(function () {
            var elemTest = $("#ccMonth").valid();                                  
        });

        $("#ccYear").blur(function () {
            var elemTest = $("#ccYear").valid();
        });

        $("#securityCode").blur(function () {
            var elemTest = $("#securityCode").valid();
        });

        $("#rblPaymentType").blur(function () {
            var elemTest = $("#rblPaymentType").valid();
        });

        $("#cardnum").blur(function () {
            var elemTest = $("#cardnum").valid();
        });

        $("#cardnum").rules("add", {
        creditcard2:
                function () {
                    return $("#rblPaymentType input[type=radio]:checked").val();
         }
        });
};

function pageLoad()
{
    paymentpagevalidation();
}

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

jkirkerx3-May-12 19:50

3-May-12 19:50

Tonight was my bowling night, and I left early today.

I can't see how that would work. Are you still using update panels?

I'll do you a favor, and rewrite your validation, so you can dump the microsoft validator and do pure jquery with update panels.

I just need to see the browser source code of the textboxes that makeup your credit card program, so I can get the id tags.

From there, you should be able to get an idea of how to use jquery to validate.

OK

indian1434-May-12 6:26

Playing music on my end, using APIs of search engines

4-May-12 6:26

Hi,

I dont know whats the bowling is, is it base ball bowling or cricket bowling Smile | :)

.

Here is the html from view source, please help me.

<!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">
<head id="Head1"><title>
 
</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="content-language" content="en-us" /><meta name="created" content="2011/06/21" /><meta name="last-modified" content="2011/06/21" />
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.cycle.min.js"></script>
    <script type="text/javascript" src="/Scripts/analytics.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="/Scripts/core.js"></script>
    <script type="text/javascript" src="/Script/jquery.ba-tinypubsub.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.min.js" charset="ISO-8859-1"></script>
    <script type="text/javascript" src="/Script/Utility.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://www.wsdot.wa.gov/media/styles/styles.css" /><link rel="stylesheet" type="text/css" media="print" href="http://www.wsdot.wa.gov/media/styles/print.css" /><link rel="stylesheet" type="text/css" media="screen" href="../../css/ferries_reservations.css" /><link rel="shortcut icon" href="http://www.wsdot.wa.gov/favicon.ico" />
    <script type="text/javascript">
 
        var localURL = 'http://localhost:1500/Service/';
        var MaxVehLength = '79';
 
        function switchto(q) {
            if (q) {
                document.getElementById('passwordtext').style.display = "none";
                document.getElementById('inPwd').style.display = "inline";
                document.getElementById('inPwd').focus();
            } else {
                document.getElementById('inPwd').style.display = "none";
                document.getElementById('passwordtext').style.display = "inline";
            }
        }
 
        function emailprompt(em) {
            if (em.value == 'Email address') {
                em.value = '';
            }
            else if (em.value == '') {
                em.value = 'Email address';
            }
        }
        //alert message for user about caps lock on
        function capLock(e) {
            kc = e.keyCode ? e.keyCode : e.which;
            sk = e.shiftKey ? e.shiftKey : ((kc == 16) ? true : false);
            if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk))
                document.getElementById('divMayus').style.visibility = 'visible';
            else
                document.getElementById('divMayus').style.visibility = 'hidden';
        }
        //cleaning the caps lock on message
        function capLockClaen() {
            
                document.getElementById('divMayus').style.visibility = 'hidden';
        }            
    </script>
</head>
<body>
    <div id="header">
        <div class="topban">
            <ul class="topnav">
                <li><a href="http://www.wsdot.wa.gov/">WSDOT Home</a></li>
                <li><a href="http://www.wsdot.wa.gov/contact/">Contact Us</a></li>
                <li><a href="http://www.wsdot.wa.gov/goodtogo/">Good To Go!</a></li>
                <li><a href="http://www.wsdot.wa.gov/employment/">Employment</a></li>
                <li class="first"><a href="http://www.wsdot.wa.gov/news/">News</a></li>
            </ul>
        </div>
        <div class="logo">
            <h1>
                <a href="http://www.wsdot.wa.gov">
                    <img src="http://www.wsdot.wa.gov/media/images/blacklogo.gif" alt="WSDOT" /></a>
            </h1>
            <div class="emailupdates">
                <a href="http://service.govdelivery.com/service/multi_subscribe.html?code=WADOT"
                    onclick="window.open('http://service.govdelivery.com/service/multi_subscribe.html?code=WADOT','Popup','width=780,height=440,toolbar=no,scrollbars=yes,resizable=yes'); return false"
                    title="Sign up for e-mail updates">Email updates</a></div>
        </div>
        <div class="mainban">
            <div class="mainnav">
                <ul>
                    <li><a href="http://www.wsdot.wa.gov/traffic/" title="Statewide Traveler Information">
                        Traffic & Cameras</a></li>
                    <li><a href="http://www.wsdot.wa.gov/projects/" title="Highway, Ferry and Rail Construction Projects">
                        Projects</a></li>
                    <li><a href="http://www.wsdot.wa.gov/business/" title="Information on Doing Business with WSDOT">
                        Business</a></li>
                    <li><a href="http://www.wsdot.wa.gov/environment/" title="What does WSDOT do for the environment?">
                        Environment</a></li>
                    <li><a href="http://www.wsdot.wa.gov/mapsdata.htm" title="Maps, Publications and Transporation Data">
                        Maps & Data</a></li>
                </ul>
                <div class="search">
                    <form id="searchform" method="get" action="http://usasearch.gov/search">
                    <input type="hidden" name="affiliate" value="WSDOT" />
                    <input type="hidden" name="v:project" value="firstgov" />
                    <input type="text" name="query" id="query-field" class="search-text" />
                    <input type="submit" value="Search" class="searchButton" />
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="breadcrumbs">
        You are Here: <a href="http://www.wsdot.wa.gov">Home</a> > <a href="http://www.wsdot.wa.gov/ferries/">
            Ferries</a></div>
    <form method="post" action="AccountHolderPayment.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="MainForm">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwODk5NDc1NDAPFgQeC3VzZXJBY3RJbmZvMvkNAAEAAAD/////AQAAAAAAAAAMAgAAAENQdWJsaWNWUlNMaWIsIFZlcnNpb249MC41LjMuMCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj1udWxsBQEAAAAtV1NET1QuV1NGLldlYkFwcC5QdWJsaWNWUlNMaWIuVXNlckFjY291bnRJbmZvJAAAABg8RW1haWxJRD5rX19CYWNraW5nRmllbGQmPFVzZXJFbWFpbFZlcmlmaWVkRmxhZz5rX19CYWNraW5nRmllbGQaPEFjY291bnRJRD5rX19CYWNraW5nRmllbGQYPE9yZGVySWQ+a19fQmFja2luZ0ZpZWxkJjxQcmV2aW91c1Jlc2VydmF0aW9uSUQ+a19fQmFja2luZ0ZpZWxkJDxQcmV2aW91c09yZGVySXRlbUlEPmtfX0JhY2tpbmdGaWVsZB48QWNjb3VudFR5cGVJRD5rX19CYWNraW5nRmllbGQgPEFjY291bnRUeXBlRW51bT5rX19CYWNraW5nRmllbGQiPEFjY291bnRBY3RpdmVGbGFnPmtfX0JhY2tpbmdGaWVsZCI8QWNjb3VudExvb2tVcENvZGU+a19fQmFja2luZ0ZpZWxkGjxBY2NBZGRySUQ+a19fQmFja2luZ0ZpZWxkIzxTdHJlZXRBZGRyZXNzTGluZTE+a19fQmFja2luZ0ZpZWxkIzxTdHJlZXRBZGRyZXNzTGluZTI+a19fQmFja2luZ0ZpZWxkFTxDaXR5PmtfX0JhY2tpbmdGaWVsZBo8Q291bnRyeUlkPmtfX0JhY2tpbmdGaWVsZBw8Q291bnRyeU5hbWU+a19fQmFja2luZ0ZpZWxkGDxTdGF0ZUlkPmtfX0JhY2tpbmdGaWVsZBo8U3RhdGVOYW1lPmtfX0JhY2tpbmdGaWVsZBs8UG9zdGFsQ29kZT5rX19CYWNraW5nRmllbGQkPEFjY291bnRDaGFsbGVuZ2VJRDE+a19fQmFja2luZ0ZpZWxkJDxBY2NvdW50Q2hhbGxlbmdlSUQyPmtfX0JhY2tpbmdGaWVsZBw8dXNlclF1ZXNJRDE+a19fQmFja2luZ0ZpZWxkHDx1c2VyUXVlc0lEMj5rX19CYWNraW5nRmllbGQcPHVzZXJBbnN3ZXIxPmtfX0JhY2tpbmdGaWVsZBw8dXNlckFuc3dlcjI+a19fQmFja2luZ0ZpZWxkHjx1c2VyQ29udGFjdE5vPmtfX0JhY2tpbmdGaWVsZBo8Rmlyc3ROYW1lPmtfX0JhY2tpbmdGaWVsZBk8TGFzdE5hbWU+a19fQmFja2luZ0ZpZWxkGTxQZXJzb25JRD5rX19CYWNraW5nRmllbGQgPEFjY291bnRUeXBlTmFtZT5rX19CYWNraW5nRmllbGQgPEFjY291bnRSb2xlTmFtZT5rX19CYWNraW5nRmllbGQkPFByZW1pZXJEaXNhYmxlZEZhbGc+a19fQmFja2luZ0ZpZWxkJzxNdWx0aVJpZGVSZXZhbHVlQ2FyZE5vPmtfX0JhY2tpbmdGaWVsZCQ8UHJpbWFyeUNoYXJnZUNhcmRJRD5rX19CYWNraW5nRmllbGQdPEJ1c2luZXNzTmFtZT5rX19CYWNraW5nRmllbGQhPFdTRkFjY291bnROdW1iZXI+a19fQmFja2luZ0ZpZWxkAQAAAAAAAAQAAQABAQEAAQABAQAAAAABAQEBAQABAQABAAEBAQgICAgIKVdTRE9ULldTRi5XZWJBcHAuUHVibGljVlJTTGliLkFjY291bnRUeXBlAgAAAAEICAgICAgICAEIAgAAAAYDAAAAH01vaGFtbUFAY29uc3VsdGFudC53c2RvdC53YS5nb3YBBTAAAAAAAAAAAAAAAAAAAAEAAAAF/P///ylXU0RPVC5XU0YuV2ViQXBwLlB1YmxpY1ZSU0xpYi5BY2NvdW50VHlwZQEAAAAHdmFsdWVfXwAIAgAAAAYAAAABBgUAAAARNzU1MTEyNTUwNDAzNDIxMzOVFwAABgYAAAAXODQyMyBTb3V0aCAxMjB0aCBTdHJlZXQGBwAAABc4NDIzIFNvdXRoIDEyMHRoIFN0cmVldAYIAAAAB1NlYXR0bGXoAAAABgkAAAAYVW5pdGVkIFN0YXRlcyBvZiBBbWVyaWNhMAAAAAYKAAAACldhc2hpbmd0b24GCwAAAAU5ODE3OGEIAABiCAAAIgAAABMAAAAGDAAAAAFuBg0AAAABbgYOAAAADDQwOC00MzEtMjcyMQYPAAAAC0FiZHVsIEFsZWVtBhAAAAAITW9oYW1tYWTRMgAABhEAAAAHR2VuZXJhbAkRAAAAAAoAAAAABhIAAAAACRIAAAALHhVBY2NvdW50Q2hhcmdlQ2FyZEluZm9kFgJmD2QWAgIDD2QWBgIDD2QWAgIBD2QWAmYPFgIeBFRleHQFTEhlbGxvLCBBYmR1bCBBbGVlbSBNb2hhbW1hZCBXZWxjb21lIHRvIHlvdXIgU2F2ZSBBIFNwb3QgcmVzZXJ2YXRpb24gYWNjb3VudC5kAgcPZBYCAgIPZBYCZg9kFgwCAQ8WAh8CBRRBYmR1bCBBbGVlbSBNb2hhbW1hZGQCAw8WAh8CBQw0MDgtNDMxLTI3MjFkAgUPEA8WBh4NRGF0YVRleHRGaWVsZAUaQ2hhcmdlQ2FyZEZvcm1hdGVkTGFzdEZvdXIeDkRhdGFWYWx1ZUZpZWxkBRNBY2NvdW50Q2hhcmdlQ2FyZElkHgtfIURhdGFCb3VuZGdkEBUBCVNlbGVjdC4uLhUBAi0xFCsDAWcWAWZkAgcPEA8WAh4HQ2hlY2tlZGdkZGRkAgkPZBYKAgsPD2QWBB4Gb25CbHVyBSdyZXR1cm4gb25seU1vbnRoKCdNYWluQ29udGVudF9jY01vbnRoJykeCm9ua2V5cHJlc3MFFXJldHVybiBvbmx5TnVtYmVycygpO2QCDQ8PZBYCHwgFFXJldHVybiBvbmx5TnVtYmVycygpO2QCFQ8PZBYCHwgFFXJldHVybiBvbmx5TnVtYmVycygpO2QCJw8QDxYGHwMFC0NvdW50cnlOYW1lHwQFCUNvdW50cnlJZB8FZ2QQFQUJU2VsZWN0Li4uCUF1c3RyYWxpYQZDYW5hZGEYVW5pdGVkIFN0YXRlcyBvZiBBbWVyaWNhHFVuaXRlZCBTdGF0ZXMgVmlyZ2luIElzbGFuZHMVBQItMQIxNAI0MAMyMzIDMjMzFCsDBWdnZ2dnFgFmZAIrDxBkEBUBCVNlbGVjdC4uLhUBAi0xFCsDAWdkZAIRDxYCHwIFBSQ4Ljc1ZAIJDw8WBB8CBQ9WZXJzaW9uIDAuNS4zLjAeB1Zpc2libGVnZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFKmN0bDAwJE1haW5Db250ZW50JGNoa1BheVdpdGhBTmV3Q3JlZGl0Q2FyZAUfY3RsMDAkTWFpbkNvbnRlbnQkY2hrU2F2ZUNDSW5mbwUUY3RsMDAkTG9nSW5NdWx0aVZpZXcPD2QCAWRzbbvImUZ4LR3Z7BBzyW4EWKtmjgc6lHC16Jg+XhFLCQ==" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['MainForm'];
if (!theForm) {
    theForm = document.MainForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=FjPTT5k0s7rWNSwehkc3N8nw9gzXuhosUnzgi0goWC1qLlVw8FejBPn5_LWAyRqIPMeWGxbIQrHatf_DLOXptluA-IhMzamBUn9BmsPwfyY1&t=634690584266056070" type="text/javascript"></script>
 
 
<script src="/ScriptResource.axd?d=7Xth24T1ZxfhLGIjvebEyrqXzaZV2l7g2yykbCLgsq-2-zinuoyPuJJ-8QsHRrGQSRXoUEzQ5DKjGPh-mkyhmVEAAz_GxFvwCGRhxop8OCpQAZlbAOs4xe6dLoYD1y7NnbjH0TVJcmhKKemiAji43xgvklEYLk6r9CaAlbDV-VI1&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=QW99NAq4KkY6u3kHxIMupeJle_oH8O8HedI6IpcZi96Vdtt2Qv2aIobL1qBz_UD9ErQorK9pEn3j8tUa2DGnbFOtMuMD6RoIKKsLWFCKlvtfR8RbpDm4ADWeNVEndKbjzl7UoZsQAKcB8jvSkUmd8qmd5sfbUgw-0fBgDtoWIdzydkDxZ88RZ-OivkFrwAoR0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
 
<script src="/ScriptResource.axd?d=gOCp8dgJYeFxE6ZytUbCCyWfpp6ytTlx7_jwq3zD47u3MKvPBC0FdMfPLSxEmzr-RxZjGzpC7rU99V-jc_uDQL6-DcHRaVkwNFkqt7PUzHzUDGzqYnWARp3b4iRdDl7rRaCG4DW4tnD7HV8MWTKNyYpAoHfOu04GJPugPGtpnTkQvK6LYL8e05AdVJWeSCcK0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
 
    <div id="wrapper">
        <!-- Begin: Left navigation box -->
        <div id="ctl00_LeftNavColumn" class="leftnav">
            <a id="sailinglink" href="../../SailingSchedule.aspx">
                <img src="/images/WSFVRSlogo.jpg" width="163" height="40" alt="Washington State Ferries Vehicle Reservations"/>
            </a>
        
            
                    <!-- Begin: After LOGIN -->
                    <div class="heading_lg">
                        <h4 class="inverse ptm">My Account</h4>
                    </div>
                    <div id="Div2" style="padding-bottom:10px;">
                        <div class="sizeAccount lt">
                          <p>Hello, Abdul Aleem Mohammad Welcome to your Save A Spot reservation account.</p>
                        </div>
                        <div class="heading_lg">
                          <h4 class="inverse pts ">Manage a Reservation</h4>
                        </div> 
                        <div class="sizeAccount pts pbs lt mbm">                            
                          <ul>
                            <li>
                                <a id="lkbChangecancelView" href="javascript:__doPostBack('ctl00$lkbChangecancelView','')">Cancel, Change, or View a reservation</a></li>
                            <li> <a id="lkbManageMyAccount" href="javascript:__doPostBack('ctl00$lkbManageMyAccount','')">Manage my account</a></li>
                            <li><a href="/LogOff.aspx">Sign out</a></li>
                          </ul>
                        </div>  
                    </div>
                    <!-- END: After LOGIN -->
                 
            <div class="leftnavbox">
                <h4 class="header greyBg">
                    Most Requested</h4>
                <div class="content">
                    <ul>
                        <li><a href="http://www.wsdot.wa.gov/ferries/schedule/">Current Schedule</a></li>
                        <li><a href="http://www.wsdot.wa.gov/ferries/wave2go/">Buy Ferry Tickets</a></li>
                        <li><a href="https://business.wsdot.wa.gov/ferries/reservations/">Reservations</a></li>
                        <li><a href="http://www.wsdot.wa.gov/ferries/fares/">Fares</a></li>
                        <li><a href="http://www.wsdot.wa.gov/ferries/info_desk/terminals/">Find Your Terminal</a></li>
                        <li><a href="http://www.wsdot.wa.gov/ferries/cameras/index.cfm">Ferry Cameras</a></li>
                        <li><a href="http://www.wsdot.wa.gov/ferries/infodesk/contact.htm">Contact WSF</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- End: Left navigation box -->
        <!----START: RESERVATION MAIN--->
        <div id="res_main">
             <h2 class="title2 pbm pts plm"><span id="lblPageTitle">Washington State Ferries Vehicle Reservations</span></h2>   
            <!--START: Green header--->       
                
 
 
 
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>    
<script type="text/javascript" src="../../Script/Payment.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.creditcard2.js"></script>
 
 <script type="text/javascript">
$.fn.paymentpagevalidation = function() {
        var cardholdernameValid = false;
        var confirmationValid = false; 
 
                        $(function ($) {
        $("#cardnum").ForceNumericOnly();
    });
 
                            $(function ($) {
        $("#ccMonth").ForceNumericOnly();
    });
    
                                $(function ($) {
        $("#ccYear").ForceNumericOnly();
    });
 
                                $(function ($) {
        $("#securityCode").ForceNumericOnly();
    });
      
       $('.validationGroup .causesValidation').click(function (evt) {
 
    // Ascend from the button that triggered this click event 
    //  until we find a container element flagged with 
    //  .validationGroup and store a reference to that element.
    var $group = $(this).parents('.validationGroup');
 
    var isValid = true;
 
    // Descending from that .validationGroup element, find any input
    //  elements within it, iterate over them, and run validation on 
    //  each of them.
    $group.find(':input').each(function (i, item) {
 
    if($(item)[0].id != "")
    {  
      if($(item)[0].id != "address2")
      {
          if (!$(item).valid())
          {
            isValid = false;
          }
      }
    }
  });
 
    if (!isValid)
      evt.preventDefault();
  });
 
$.validator.addMethod("dropDownValidator", function (value, element, parameters) {         
if (value == '-1'){
return false;
}
else
return true;
});          
 
$.validator.addMethod("monthValidator", function (value, element, parameters) {         
if ((value < 1) || (value > 12)){
return false;
}
else if((value >= 1) || (value <= 12)){
return true;
}
else{
return false;
}
}); 
 
$("#securityCode").click(function () {    
    if($("#rblPaymentType input[type=radio]:checked").val()=="AmEx")
    {
        $("#securityCode").attr('maxlength','4'); 
    }
    else
    {
        $("#securityCode").attr('maxlength','3'); 
    }
});
 
$.validator.addMethod("securityCodeValidator", function (value, element, parameters) {         
    if($("#rblPaymentType input[type=radio]:checked").val()=="AmEx")
    {
        if($("#securityCode").val().length == 4)
        {
            return true;
        }
        else
        {
          return false;
        }
    }
    else
    {
        if($("#securityCode").val().length == 3)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});     
                       
        $('#form').validate({       
           
            rules: {
                 ctl00$MainContent$cardholdername: {
                    required: true,
                    minlength: 1
                },
                 ctl00$MainContent$address1: {
                    required: true,
                    minlength: 1
                },
                 ctl00$MainContent$city: {
                    required: true,
                    minlength: 1
                },
                 ctl00$MainContent$postcode: {
                    required: true
                },
                 ctl00$MainContent$ccMonth: {
                    required: true,
                    minlength: 2,                   
                    number: true,
                    monthValidator: true                  
                },
                 ctl00$MainContent$ccYear: {
                    required: true,
                    minlength: 2,
                    number: true
                },
                 ctl00$MainContent$securityCode: {
                    required: true,
                    minlength: 3,
                    number: true,
                    securityCodeValidator: true
                },
                ctl00$MainContent$rblPaymentType: {
                    required: true
                },
                ctl00$MainContent$cardnum: {
                required: true,
                number: true
                },
                ctl00$MainContent$ddlCountry: 
                {                                         
                    dropDownValidator: true                 
                },
                ctl00$MainContent$ddlState: 
                {                                         
                    dropDownValidator: true                 
                }
            },
            messages: {
                ctl00$MainContent$cardholdername: {
                    required: "Please provide your Cardholder Name",
                    minlength: "Your Cardholder Name must be at least 1 characters long" 
                },
                ctl00$MainContent$address1: {
                    required: "Please provide your Address1",
                    minlength: "Your Address1 must be at least 1 characters long" 
                },
                ctl00$MainContent$city: {
                    required: "Please provide your City",
                    minlength: "Your City Number be at least 1 characters long" 
                },
 
                ctl00$MainContent$postcode: {
                    required: "Please provide your Postal Code"
                },
                ctl00$MainContent$rblPaymentType: {
                    required: "Please select Credit Card Type"
                },
                ctl00$MainContent$ccMonth: {
                    required: "Please confirm your Credit Card Month",
                    minlength: "Your Credit Card Month must be at least 2 digits long",
                    number: "Provide only digits for the month",
                    monthValidator: "Invalid Month"                 
                },
                ctl00$MainContent$ccYear: {
                    required: "Please confirm your Credit Card Year",
                    minlength: "Your Credit Card Year must be at least 2 digits long",
                    number: "Provide only digits for the year"
                },
                ctl00$MainContent$securityCode: {
                    required: "Please confirm your Security Code",
                    minlength: "Your Security Code must be at least 3 digits long",
                    number: "Provide only digits for the security code",
                    securityCodeValidator: "Please provide 4 digits for AmEx card"
                },
                ctl00$MainContent$cardnum: {
                    required: "Please enter your Credit Card number",
                    number: "Provide only digits for the credit card number"
                },
                ctl00$MainContent$ddlCountry: {
                dropDownValidator: "Please Select Country"
                },
                ctl00$MainContent$ddlState: {
                dropDownValidator: "Please Select State"
                }
            },
            errorElement: "li",
            errorLabelContainer: "#errorMessage",
            onsubmit: false
 
        });
 
        //validate on change
 
        $("#cardholdername").blur(function () {       
            var elemTest = $("#cardholdername").valid();
        });
 
        $("#address1").blur(function () {
            var elemTest = $("#address1").valid();
        });
 
         $("#city").blur(function () {
            var elemTest = $("#city").valid();
        });
 
        $("#ddlState").blur(function () {
            var elemTest = $("#ddlState").valid();
        });
 
        $("#ddlCountry").blur(function () {
            var elemTest = $("#ddlCountry").valid();
        });
 
        $("#postcode").blur(function () {
            var elemTest = $("#postcode").valid();
        });
 
        $("#ccMonth").blur(function () {
            var elemTest = $("#ccMonth").valid();                                  
        });
 
        $("#ccYear").blur(function () {
            var elemTest = $("#ccYear").valid();
        });
 
        $("#securityCode").blur(function () {
            var elemTest = $("#securityCode").valid();
        });
 
        $("#rblPaymentType").blur(function () {
            var elemTest = $("#rblPaymentType").valid();
        });
 
        $("#cardnum").blur(function () {
            var elemTest = $("#cardnum").valid();
        });
 
        $("#cardnum").rules("add", {
        creditcard2:
                function () {
                    return $("#rblPaymentType input[type=radio]:checked").val();
         }
        });
};
 
function pageLoad()
{
    paymentpagevalidation();
}
    </script>
 
<script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$smPayment', 'MainForm', ['tctl00$MainContent$updatepanel1','MainContent_updatepanel1'], ['ctl00$MainContent$ddlPayWithACreditCardOnFile','MainContent_ddlPayWithACreditCardOnFile','ctl00$MainContent$chkPayWithANewCreditCard','MainContent_chkPayWithANewCreditCard','ctl00$MainContent$ddlCountry','MainContent_ddlCountry'], [], 90, 'ctl00');
//]]>
</script>
 
<div id="MainContent_updatepanel1Updateprogress1" style="display:none;">
	
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Please wait ...<br /><br />
                <img alt="Loading" src="../../images/ajax-loader.gif" />
        </div>
    
</div>
<div id="MainContent_updatepanel1">
	
<div id="res_main">
  <div id="reservation_container"> 
    <!--START: Green header--->
    <div class="main_headerbar_childpage">
      <h4 class="inverse pts plm">Payment Information</h4>
    </div>
    <!--END:Green header--> 
    <!--START: ORDER SUMMARY MAIN CONTAINER-->
    <!--START: mod-->
    <div class="mod simpleExt"> class="top"__^</b__^
      <div> <!--class="inner ptxl"-->
         <div class="sizeAccount ptm" >
          <!--START: CREDIT CARD INFO-->
           <div class="line">
           <div class="unit size1of2">
           <h2 class="pln">Reservation Holder Details</h2>
           <p>^__strong__^Reservation Holder Name:<br />
 Abdul Aleem Mohammad</p>
           <P>^__strong>Reservation Holder Phone:<br />
  408-431-2721</p>
           </div>
           <div class="unit size1of2 lastUnit">
           <h2 class="pln">Payment Details</h2>
             <p class="ptn">Pay with a Credit Card on file:           
            <select name="ctl00$MainContent$ddlPayWithACreditCardOnFile" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddlPayWithACreditCardOnFile\',\'\')', 0)" id="MainContent_ddlPayWithACreditCardOnFile" tabindex="7" style="width:200px;">
		<option selected="selected" value="-1">Select...</option>
 
	</select>
</p>
  <p class="ptn">
               
   <input id="MainContent_chkPayWithANewCreditCard" type="checkbox" name="ctl00$MainContent$chkPayWithANewCreditCard" checked="checked" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$chkPayWithANewCreditCard\',\'\')', 0)" /> Pay with a new credit card
         </p>
           </div>
           </div>
           <div class="hz_line"></div>
           <div id="MainContent_panNewCardInfo">
		
      <div class="line">
              <div class="unit size1of4"> ^__strong>
                <p>Payment Details</p>
                
                <p align="right" >Payment Type:</p>
                                                  <br />
                                                  <br />
                <p align="right" class="ptm">Card Number:</p>
                <br />
                <p align="right" >Expiration Date:</p>
                <br />
                <p align="right" >Security Code:</p>
              </div>
              <div class="unit size1of4 ptxl">
                <div class="payment_logos" style="float:left;">
                  <fieldset>
                    <table id="MainContent_rblPaymentType" onclick="javascript: OnRadioSelection(this);" style="width:30px;">
			<tr>
				<td><input id="MainContent_rblPaymentType_0" type="radio" name="ctl00$MainContent$rblPaymentType" value="Visa" /><label for="MainContent_rblPaymentType_0"><br /><img src="../../images/logo_visa.jpg" width="30" height="20" alt="Visa logo" /><br /></label></td><td><input id="MainContent_rblPaymentType_1" type="radio" name="ctl00$MainContent$rblPaymentType" value="MasterCard" /><label for="MainContent_rblPaymentType_1"><br /><img src="../../images/logo_mastercard.jpg" width="30" height="20" alt="Mastercard logo" /><br /></label></td><td><input id="MainContent_rblPaymentType_2" type="radio" name="ctl00$MainContent$rblPaymentType" value="Discover" /><label for="MainContent_rblPaymentType_2"><br /><img src="../../images/logo_discover.jpg" width="30" height="20" alt="Discover card logo" /><br /></label></td><td><input id="MainContent_rblPaymentType_3" type="radio" name="ctl00$MainContent$rblPaymentType" value="AmEx" /><label for="MainContent_rblPaymentType_3"><br /><img src="../../images/logo_american-express.jpg" width="30" height="20" alt="America Express logo" /><br /></label></td>
			</tr>
		</table>
                    <span id="MainContent_rfvrblPaymentType" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Payment Type is required!</span>
                  </fieldset>
                                                                    <br />
                                                  <br />
                    <input name="ctl00$MainContent$cardnum" type="text" maxlength="19" id="MainContent_cardnum" tabindex="12" />
                    <span id="MainContent_rfvcardnum" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Card number is required!</span>
                    <span id="MainContent_cvCardnum" style="color:Red;visibility:hidden;">Not a valid number.<br/></span>                    
                    <input name="ctl00$MainContent$ccMonth" type="text" maxlength="2" id="MainContent_ccMonth" tabindex="13" onBlur="return onlyMonth('MainContent_ccMonth')" onkeypress="return onlyNumbers();" style="width: 25px;" />                     
                    /
                    <input name="ctl00$MainContent$ccYear" type="text" maxlength="2" id="MainContent_ccYear" tabindex="14" onkeypress="return onlyNumbers();" style="width: 25px;" />
                    <br />
                    <span id="MainContent_rfvccMonth" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Month is required!</span>                    
                    <span id="MainContent_cvMonth" style="color:Red;visibility:hidden;">Not a valid month.<br/></span> 
                    <span id="MainContent_rfvccYear" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Year is required!</span>
                     <br />
                    <input name="ctl00$MainContent$securityCode" type="text" maxlength="3" id="MainContent_securityCode" tabindex="15" onkeypress="return onlyNumbers();" style="width: 35px;" />
                    <span id="MainContent_rfvsecurityCode" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Security Code is required!</span>
                </div>
              </div>
              <div class="unit size1of4"> ^__strong>
                <p>Cardholder Information</p>
                
                <p align="right">Cardholder Name:</p>
                <p align="right">Address line 1:</p>
                <p align="right">Address line 2:<br />
                  (Optional) </p>
                <p align="right">City:</p>
                <br />
                <p align="right">Country</p>
                <p align="right">State/Province:</p>
                <p align="right">Postal Code:</p>
              </div>
              <div class="unit size1of4 ptxl lastUnit">
                <input name="ctl00$MainContent$cardholdername" type="text" maxlength="100" id="MainContent_cardholdername" tabindex="16" />
                <span id="MainContent_rfvcardholdername" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Cardholder name is required!</span><br /><br />
                <input name="ctl00$MainContent$address1" type="text" maxlength="50" id="MainContent_address1" tabindex="17" />
                <span id="MainContent_rfvaddress1" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Address line1 is required!</span><br /><br />
                <input name="ctl00$MainContent$address2" type="text" maxlength="50" id="MainContent_address2" tabindex="18" /><br /><br /><br />
                <input name="ctl00$MainContent$city" type="text" maxlength="50" id="MainContent_city" tabindex="19" />
                <span id="MainContent_rfvcity" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>City is required!</span><br /><br />
                            <select name="ctl00$MainContent$ddlCountry" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$ddlCountry\',\'\')', 0)" id="MainContent_ddlCountry" tabindex="20" style="width:155px;">
			<option selected="selected" value="-1">Select...</option>
			<option value="14">Australia</option>
			<option value="40">Canada</option>
			<option value="232">United States of America</option>
			<option value="233">United States Virgin Islands</option>
 
		</select>
                            <span id="MainContent_rfvddlCountry" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Select Country!</span>
                                <br />
                            <select name="ctl00$MainContent$ddlState" id="MainContent_ddlState" tabindex="21" style="width:100px;">
			<option value="-1">Select...</option>
 
		</select>
                            <span id="MainContent_rfvddlState" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Select a State!</span><br />
                    <br />
                <input name="ctl00$MainContent$postcode" type="text" maxlength="12" id="MainContent_postcode" tabindex="22" />
                <span id="MainContent_rfvpostcode" style="color:Red;font-size:X-Small;visibility:hidden;"><br/>Postal code is required!</span>
              </div>
      </div>
      
	</div>
              <p class="ptn">
            <input id="MainContent_chkSaveCCInfo" type="checkbox" name="ctl00$MainContent$chkSaveCCInfo" /><label for="MainContent_chkSaveCCInfo">   Save this credit card information to my account</label> 
         </p>
         <div>
            <ul id="MainContent_errorMessage" class="error">
                <!--errors here-->
                
            </ul>
         </div>
 
        <div class="button leftbigbox">
        <div style="height:290px;"></div>
                  <div class="row"> 
                   <input name="ctl00$MainContent$btnBack" type="button" id="MainContent_btnBack" value="Back" class="button green backbutton" tabindex="20" onclick="goBack()" />
          </div>
      </div>
            <div class="payment_box right" style="margin-bottom:10px;">
                <div class="confirmation_reminder" >
                    <ul>
                        <li>
                            Any additional vehicle and driver fare owed will be<br /> collected at the tollbooth.
                        </li>
                        <li>
                            Passengers may purchase their tickets at the tollbooth. 
                        </li>
                        <li>
                            Please arrive 30 minutes prior to reserved sailing <br />departure.
                        </li>
                        <li>
                            Seniors and disabled drivers receive ticket discounts with<br /> valid ID.
                        </li>
                        <li>
                            This reservation includes the vehicle and driver.
                        </li>
                    </ul>
                </div>
                <div class="payment_total">
                    <p>Total Due Now: $8.75</p>
                </div>
            <div class="row">
        </div>
        <div class="button right">
    <input type="submit" name="ctl00$MainContent$btnPayNow" value="PAY NOW" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnPayNow", "", true, "", "", false, false))" id="MainContent_btnPayNow" tabindex="19" class="button green right causesValidation" />
      </div>
            </div>
          <div class="row"> 
          </div>
          ^__b class="bl"> </div>
      </div>
      <!--END:Mod--> 
    </div>
    </div>
    <!---END: CREDIT CARD INFO-->
    <div class="cl"></div>
  </div>
  <div class="cl"></div>
</div>
<div class="corners-bottom"></div>
 
</div>
       
            <!--/PAGEWATCH-->
            <div class="cl">
            </div>
        </div>
        <div class="cl">
        </div>
    </div>
    <div class="corners-bottom">
    </div>
    <!-- Begin: Footer -->
    <div class="corners-top">
    </div>
    <div class="footer">
        <ul class="bottomnav">
            <li class="first"><a href="http://www.wsdot.wa.gov/traffic/">Traffic & Cameras</a></li>
            <li><a href="http://www.wsdot.wa.gov/search/">Search</a></li>
            <li><a href="http://www.wsdot.wa.gov/contact/">Contact Us</a></li>
            <li><a href="http://www.wsdot.wa.gov/siteindex/">Site Index</a></li>
            <li><a href="http://www.wsdot.wa.gov/policy/privacy.htm">Privacy Policy</a></li>
            <li class="last"><a href="http://www.wsdot.wa.gov/policy/accessibility">Accessibility
                / Title VI</a> </li>
        </ul>
        <div class="copyright">
            Copyright WSDOT © 2012<p>
            </p>
            <span id="versionLabel" style="font-weight:bold;">Version 0.5.3.0</span>
        </div>
    </div>
    
<script type="text/javascript"> 
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("MainContent_rfvrblPaymentType"), document.getElementById("MainContent_rfvcardnum"), document.getElementById("MainContent_cvCardnum"), document.getElementById("MainContent_rfvccMonth"), document.getElementById("MainContent_cvMonth"), document.getElementById("MainContent_rfvccYear"), document.getElementById("MainContent_rfvsecurityCode"), document.getElementById("MainContent_rfvcardholdername"), document.getElementById("MainContent_rfvaddress1"), document.getElementById("MainContent_rfvcity"), document.getElementById("MainContent_rfvddlCountry"), document.getElementById("MainContent_rfvddlState"), document.getElementById("MainContent_rfvpostcode"));
//]]>
</script>
 
<script type="text/javascript"> 
//<![CDATA[
var MainContent_rfvrblPaymentType = document.all ? document.all["MainContent_rfvrblPaymentType"] : document.getElementById("MainContent_rfvrblPaymentType");
MainContent_rfvrblPaymentType.controltovalidate = "MainContent_rblPaymentType";
MainContent_rfvrblPaymentType.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvrblPaymentType.initialvalue = "";
var MainContent_rfvcardnum = document.all ? document.all["MainContent_rfvcardnum"] : document.getElementById("MainContent_rfvcardnum");
MainContent_rfvcardnum.controltovalidate = "MainContent_cardnum";
MainContent_rfvcardnum.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvcardnum.initialvalue = "";
var MainContent_cvCardnum = document.all ? document.all["MainContent_cvCardnum"] : document.getElementById("MainContent_cvCardnum");
MainContent_cvCardnum.controltovalidate = "MainContent_cardnum";
MainContent_cvCardnum.errormessage = "Not a valid number.<br/>";
MainContent_cvCardnum.evaluationfunction = "CustomValidatorEvaluateIsValid";
MainContent_cvCardnum.clientvalidationfunction = "isValidCreditCard";
var MainContent_rfvccMonth = document.all ? document.all["MainContent_rfvccMonth"] : document.getElementById("MainContent_rfvccMonth");
MainContent_rfvccMonth.controltovalidate = "MainContent_ccMonth";
MainContent_rfvccMonth.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvccMonth.initialvalue = "";
var MainContent_cvMonth = document.all ? document.all["MainContent_cvMonth"] : document.getElementById("MainContent_cvMonth");
MainContent_cvMonth.controltovalidate = "MainContent_ccMonth";
MainContent_cvMonth.errormessage = "Not a valid month.<br/>";
MainContent_cvMonth.evaluationfunction = "CustomValidatorEvaluateIsValid";
MainContent_cvMonth.clientvalidationfunction = "isValidMonth";
var MainContent_rfvccYear = document.all ? document.all["MainContent_rfvccYear"] : document.getElementById("MainContent_rfvccYear");
MainContent_rfvccYear.controltovalidate = "MainContent_ccYear";
MainContent_rfvccYear.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvccYear.initialvalue = "";
var MainContent_rfvsecurityCode = document.all ? document.all["MainContent_rfvsecurityCode"] : document.getElementById("MainContent_rfvsecurityCode");
MainContent_rfvsecurityCode.controltovalidate = "MainContent_securityCode";
MainContent_rfvsecurityCode.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvsecurityCode.initialvalue = "";
var MainContent_rfvcardholdername = document.all ? document.all["MainContent_rfvcardholdername"] : document.getElementById("MainContent_rfvcardholdername");
MainContent_rfvcardholdername.controltovalidate = "MainContent_cardholdername";
MainContent_rfvcardholdername.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvcardholdername.initialvalue = "";
var MainContent_rfvaddress1 = document.all ? document.all["MainContent_rfvaddress1"] : document.getElementById("MainContent_rfvaddress1");
MainContent_rfvaddress1.controltovalidate = "MainContent_address1";
MainContent_rfvaddress1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvaddress1.initialvalue = "";
var MainContent_rfvcity = document.all ? document.all["MainContent_rfvcity"] : document.getElementById("MainContent_rfvcity");
MainContent_rfvcity.controltovalidate = "MainContent_city";
MainContent_rfvcity.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvcity.initialvalue = "";
var MainContent_rfvddlCountry = document.all ? document.all["MainContent_rfvddlCountry"] : document.getElementById("MainContent_rfvddlCountry");
MainContent_rfvddlCountry.controltovalidate = "MainContent_ddlCountry";
MainContent_rfvddlCountry.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvddlCountry.initialvalue = "-1";
var MainContent_rfvddlState = document.all ? document.all["MainContent_rfvddlState"] : document.getElementById("MainContent_rfvddlState");
MainContent_rfvddlState.controltovalidate = "MainContent_ddlState";
MainContent_rfvddlState.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvddlState.initialvalue = "-1";
var MainContent_rfvpostcode = document.all ? document.all["MainContent_rfvpostcode"] : document.getElementById("MainContent_rfvpostcode");
MainContent_rfvpostcode.controltovalidate = "MainContent_postcode";
MainContent_rfvpostcode.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_rfvpostcode.initialvalue = "";
//]]>
</script>
 
 
<script type="text/javascript"> 
//<![CDATA[
 
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}
 
function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        Sys.Application.add_init(function() {
    $create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":"MainContent_updatepanel1","displayAfter":500,"dynamicLayout":true}, null, null, $get("MainContent_updatepanel1Updateprogress1"));
});
 
document.getElementById('MainContent_rfvrblPaymentType').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvrblPaymentType'));
}
 
document.getElementById('MainContent_rfvcardnum').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvcardnum'));
}
 
document.getElementById('MainContent_cvCardnum').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_cvCardnum'));
}
 
document.getElementById('MainContent_rfvccMonth').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvccMonth'));
}
 
document.getElementById('MainContent_cvMonth').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_cvMonth'));
}
 
document.getElementById('MainContent_rfvccYear').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvccYear'));
}
 
document.getElementById('MainContent_rfvsecurityCode').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvsecurityCode'));
}
 
document.getElementById('MainContent_rfvcardholdername').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvcardholdername'));
}
 
document.getElementById('MainContent_rfvaddress1').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvaddress1'));
}
 
document.getElementById('MainContent_rfvcity').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvcity'));
}
 
document.getElementById('MainContent_rfvddlCountry').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvddlCountry'));
}
 
document.getElementById('MainContent_rfvddlState').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvddlState'));
}
 
document.getElementById('MainContent_rfvpostcode').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('MainContent_rfvpostcode'));
}
//]]>
</script>
</form>
    <!-- End: Footer -->
</body>
</html>

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

modified 4-May-12 12:40pm.

web

csseyed3-May-12 2:17

csseyed

3-May-12 2:17

how disign a web page

Re: web

Richard MacCutchan3-May-12 6:56

Richard MacCutchan

3-May-12 6:56

Start here[^].

Binding 100,000 items to a list box can be just silly regardless of what pattern you are following. Jeremy Likness

Re: web

R. Giskard Reventlov3-May-12 7:48

R. Giskard Reventlov

3-May-12 7:48

or here[^] or here[^]

"If you think it's expensive to hire a professional to do the job, wait until you hire an amateur." Red Adair.
nils illegitimus carborundum

me, me, me

TLS compliant using .net

padmanabhan N2-May-12 21:56

padmanabhan N

2-May-12 21:56

Hi experts,

I need to check if a site is TLS compliant using .net. Any link or startup will be very much appreciated.

Padmanabhan
My Articles:
Articles[^]
My latest Article:
Word Automation[^]

Neha.prakash882-May-12 21:54

Neha.prakash88

2-May-12 21:54

I want to create a web application, in which it searches the API available in various sites like playme.com,freemusicarchive.org and plays mp3 at my end.

By using web services of these websites I am just getting the URLs which doesn't point to any specific mp3. So how will I write the code for player which I have prepared in my website.

I have searched several websites like beemp3.com they have the functionality, same I want to achieve for my website. Please help!!

Credit Card Security

indian1432-May-12 13:28

2-May-12 13:28

Hi,

I have an asp.net web application in which we have to do some credit card # and expiration date and cvv # validations. Is it safe to use javascript or jaquery or is it better to use server side validations.

Because if I retreive the Credit Card #, expiration date and cvv # in client side script, is it safe or vulnerable from hackers?

If its not safe can anybody please advise me how can I restrict the user from not entering characters, two digits for month and two digits for year etc client script validations.

Please give me your advise how can I resolve this? Any link or code snippet or even advise also greatly helpfull, I am googling in this mean time.

Thanks in advance.

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

Joshua Omundson2-May-12 14:00

Joshua Omundson

2-May-12 14:00

You can choose to run this on client side, but you will always want to do it again on client side as well, just in case the user disables JavaScript or messes with the HTML of the page.

There is a regular expression that you can use to validate that the credit card number is in a "valid format" and as far as the month and year, your best bet would probably use drop down boxes to restrict their input choices.

s_magus2-May-12 15:57

s_magus

2-May-12 15:57

You can do the initial credit card validation client side with javascript if you want, but you also need to do the validation server side.

Credit Card Validation:
1. Credit Card Number - The credit card number can be validated using the Luhn algorithm[^].
2. Credit Card Number - You can also validate based on length and prefix if you only accept certain cards[^].
3. CVV - For most cards it is 3 digits, except American Express which is 4 digits
4. Expiration Date - Date must be greater than or equal to current month and year. Year can be either 2 or 4 digits depending on the Processor API. Month can be either 1 or 2 digits depending on the Processor API.

If you are sending the Credit Card information back to the server to process it with the CC Processor, then you need to make sure you are using SSL. Never send Credit Card information over the internet without using a secure connection.

Never store credit card information, there are a lot of rules that you need to follow to be PCI Compliant. You agree to be PCI Complaint just by signing up with a Credit Card Processor. The potential fees associated with violations are not worth it, and time required to be fully PCI Complaint. The safest thing to do is only store the TransactionId (or whatever you API calls it), usually that is all you need if later you need to do anything else like void, credit, etc with the Credit Card API. If you want to be able to store the card information so that the user does not have to re-enter the information again, then some Credit Card Processor offer a Customer Manager where they card information is stored on the credit card processors server which would be PCI Complaint. You would then store some sort of Id(s) returned by the Processor and pass those back to the Processor in the future when you want to make another transaction.

Abel Wike8-Aug-12 1:09

Abel Wike

8-Aug-12 1:09

An SSL Certificate, also called a Digital Certificate, creates a secure link between a website and a visitor's browser. By ensuring that all data passed between the two remains private and secure, SSL encryption prevents hackers from stealing private information such as credit card numbers, names and addresses.

If you sell products or services on your website and accept credit cards online, you need an SSL Certificate for website security. If you don't sell online but want to add credibility to your website, a Site Confirm Seal may be sufficient.

ClickSSL.com offer EV SSL, Code Signing Certificate, UCC Certificate, Wildcard SSL & more certificates.

modified 12-Mar-13 4:36am.

jkirkerx2-May-12 16:29

2-May-12 16:29

Well let's think about this. Hackers can only monitor activity during the transmission of data, so Javascript is safe. It's the users responsibility to keep their computer clean. Security is only as safe as your ssl certificate, and the level of encryption your using.

In the long run, validating credit card information is not worth it. Just make sure they enter their name, card number and whatever else you need to process a AUTH_ONLY or AUTH_CAPTURE. Validating card information will be the least of your problems during checkout.

For you hard card card processors out there

Years of experience at this has lead me to think that too much validation confuses people when entering card data, and you will get a phone call for help, or the validation may result in a false flag. Worse case, your error message will be misunderstood.

indian1434-May-12 7:04

4-May-12 7:04

Excellent answer, if you dont mind which country you are from? - Is it Democratic, socialistic, secularistic, independent state of India Smile | :)

- this is what the description of india from indian constitution.

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

jkirkerx4-May-12 8:02

4-May-12 8:02

I'm going to private message that answer to you.

I wasted too much time on card validation in the past, and should of focused on the User Interface in whole. Card Validation is no good if you can't get them to fill in the data in the first place. If you blast too many messages, then they get frustrated, and give up, resulting in lost sales.

You have to make the customer feel like a rock star, so when they check out, they think they are computer king. Of course, we simply made it super easy for them, but they don't need to know that.

All the information has to be there, 100% accurate. If they see a mistake, they will leave real quick.

You have to gain the trust of the customer with your user interface, and it should be very clear and organized.

Now you can write some Jquery to help the process out, a little reminder here, a arrow there, but real gentle like.

So work on your user interface first, test it on people, then add validation one at a time. Of course get your main code working as well, then keep polishing the product until it's silky smooth and easy to use.

For validating, just paint the border of the textbox a light red, so it can be noticed, but is not shouting at them. Look at Twitter, or the Guardian Newspaper, where you can leave a comment. They are great examples of validation.

indian1434-May-12 11:34