0

有効期限の 2 つの選択フィールドを持つクレジット カード処理フォームがあります。このような

<select name="qbms_cc_expires_month" id="qbms_cc_expires_month"><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><span class="required">*</span>&nbsp;<select name="qbms_cc_expires_year" id="qbms_cc_expires_year"><option value="12">2012</option><option value="13">2013</option><option value="14">2014</option><option value="15">2015</option><option value="16">2016</option><option value="17">2017</option><option value="18">2018</option><option value="19">2019</option><option value="20">2020</option><option value="21">2021</option></select>

この $.validator.addMethod を追加しました

    $.validator.addMethod(
        "ccexpdate",
    function (value, element) {

        // Initialize todays date   i.e start date
        var today = new Date();
        var startDate = new Date(today.getFullYear(),today.getMonth(),1,0,0,0,0);

        // Initialize End/Expiry date i.e. adding 10 years to expire
        var futureLimitDate= new Date(today.getFullYear()+10,today.getMonth(),1,0,0,0,0);
        var expDate = value;

        var expYearCheck='';

        // Check Date format
        var separatorIndex = expDate.indexOf('/');
        if(separatorIndex==-1)return false; // Return false if no / found

        var expDateArr=expDate.split('/'); 
        if(expDateArr.length>2)return false; // Return false if no num/num format found

        // Check Month for validity
        if(eval(expDateArr[0])<1||eval(expDateArr[0])>12)
        {
            //If month is not valid i.e not in range 1-12
            return false;
        }

        //Check Year for format YY or YYYY
        switch(expDateArr[1].length)
        {
            case 2:expYearCheck=2000+parseInt(expDateArr[1], 10);break; // If YY format convert it to 20YY to it
            case 4:expYearCheck=expDateArr[1];break; // If YYYY format assign it to check Year Var
            default:return false;break;
        }


        // Calculated new exp Date for ja  
        expDate=new Date(eval(expYearCheck),(eval(expDateArr[0])-1),1,0,0,0,0);



        if(Date.parse(startDate) <= Date.parse(expDate))
        {
            if(Date.parse(expDate) <= Date.parse(futureLimitDate))
            {
                // Date validated
                return true;    
            }else
            {

                // Date exceeds future date
                return false;
            }

        }else
        {

            // Date is earlier than todays date
            return false;
        }


    },
    "<br />Must be a valid Expiration Date."
    );

rules: { } セクションでこれを呼び出すにはどうすればよいですか? この qbms_cc_expires_year: { ccexpdate: { month: '#qbms_cc_expires_month', year: '#qbms_cc_expires_year' } } を試しましたが、うまくいきません。

4

1 に答える 1

0

私はこれを理解し、それが同じことを達成しようとしている誰かを助けるかもしれないことを願っています。私の問題はこれを使用しようとしていましjquery.validate.jsた$.validator.addMethod。有効期限にはMM"01"の月とYYYYの2つのフィールドがあった"<option value="12">2012</option>"ので、それらを別のテキスト入力に結合してMM/YYYY、そのフィールドの検証を行いました。

$.validator.addMethod(
        "ccexpdate",
    function (value, element) {
        // Initialize todays date   i.e start date
        var today = new Date();
        var startDate = new Date(today.getFullYear(),today.getMonth(),1,0,0,0,0);
        // Initialize End/Expiry date i.e. adding 10 years to expire
        var futureLimitDate= new Date(today.getFullYear()+10,today.getMonth(),1,0,0,0,0);
        var expDate = value;
        var expYearCheck='';
        // Check Date format
        var separatorIndex = expDate.indexOf('/');
        if(separatorIndex==-1)return false; // Return false if no / found
        var expDateArr=expDate.split('/'); 
        if(expDateArr.length>2)return false; // Return false if no num/num format found
        // Check Month for validity
        if(eval(expDateArr[0])<1||eval(expDateArr[0])>12)
        {
            //If month is not valid i.e not in range 1-12
            return false;
        }
        //Check Year for format YY or YYYY
        switch(expDateArr[1].length)
        {
            case 2:expYearCheck=2000+parseInt(expDateArr[1], 10);break; // If YY format convert it to 20YY to it
            case 4:expYearCheck=expDateArr[1];break; // If YYYY format assign it to check Year Var
            default:return false;break;
        }
        // Calculated new exp Date for ja  
        expDate=new Date(eval(expYearCheck),(eval(expDateArr[0])-1),1,0,0,0,0);
        if(Date.parse(startDate) <= Date.parse(expDate))
        {
            if(Date.parse(expDate) <= Date.parse(futureLimitDate))
            {
                // Date validated
                return true;    
            }else
            {
                // Date exceeds future date
                return false;
            }
        }else
        {
            // Date is earlier than todays date
            return false;
        }
    },
    "<br />Must be a valid Expiration Date."
    );

有効期限には次の2つのフィールドがあります。

<select name="qbms_cc_expires_month" id="qbms_cc_expires_month">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="qbms_cc_expires_year" id="qbms_cc_expires_year">
<option value="12">2012</option>
<option value="13">2013</option>
<option value="14">2014</option>
<option value="15">2015</option>
<option value="16">2016</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>

2番目の選択の最後にこのフィールドを追加しました。

<input type="text" name="qbmsCombined" id="qbmsCombined" value="" style="width:45px;height:16px;" readonly="readonly">

そして私のjQueryはこのように

$().ready(function() {
    // combine exp date fields and validate new field
    $("#qbms_cc_expires_month,#qbms_cc_expires_year").change(function() {
       $("input[type='text'][name='qbmsCombined']").val($("#qbms_cc_expires_month").val() + '/' + $("#qbms_cc_expires_year").val());

    });
    // validate signup form on keyup and submit
    $("#checkoutForm").validate({
        rules: {
        qbms_cc_owner: {
                required: true
            },
        qbms_cc_number: {
                required: true,
                minlength: 13,
                maxlength: 16,
                creditcard: true
            },
            qbmsCombined: {
                ccexpdate: true
          },
          qbms_cc_cvv2: {
                required: true,
                minlength: 3,
                maxlength: 4
            },      
        },
        messages: {

            qbms_cc_owner: {
                required: "<br />Please enter the name on the Credit Card"
            },
            qbms_cc_number: {
                required: "<br />Please enter the Credit Card Number",
                minlength: "<br />Credit Card Number must be between 13 and 16 digits",
                maxlength: "<br />Credit Card Number is over 16 digits",
                creditcard: "<br />Credit Card Number is invalid"
            },
              qbms_cc_cvv2: {
                required: "<br />Please enter the Credit Card's Security Code",
                minlength: "<br />Credit Card's Security Code must be at least 3 digits",
                maxlength: "<br />Credit Card's Security Code must be 4 digits or less"
            },
        }

    });

    $('form#checkoutForm').submit(function(evt){
        if($('#checkoutForm').valid())
            return true
        else
        evt.preventDefault();
            return false;

    });
});
于 2012-05-23T12:23:03.750 に答える