1

クレジット カードのフィールドに次の属性が必要なブレインツリー (支払いゲートウェイ) のフォームを実装しています: data-encrypted-name

これは私のフォームです：

<form id="braintree-payment-form">
    <input type="text" name="first_name" id="first_name" />
    <br/><br/>
    <input type="text" name="last_name" id="last_name" />
    <br/>    <br/>
    <input type="text" id="number" data-encrypted-name="number" />
    <br/><br/>
    <input type="text" id="cvv" data-encrypted-name="cvv" />
    <br/><br/>
    <input type="submit" />
</form>

問題は、jQuery Validate を使用してこれらのフィールドを検証しようとすると、検証が正しく機能しないことです。

これは私のコードです（エラーメッセージを表示するqtipライブラリを含む）：

$(document).ready(function() {

      $("#braintree-payment-form").validate({

        errorClass: "errormessage",
        errorClass: 'error',
        validClass: 'valid',
        rules: {
          "first_name": { required: true, maxlength: 45 },
          "last_name": { required: true, maxlength: 45 }                                          
          },
        messages: { 
          "first_name":       { required: "Enter your Name", maxlength: "Largo máximo de 45 caracteres" },
          "last_name":       { required: "Enter your Last Name", maxlength: "Largo máximo de 45 caracteres" }                                       
        },
        errorPlacement: function(error, element)
        {
          //qtip
          var elem = $(element),
            corners = ['right center', 'left center'],
            flipIt = elem.parents('span.right').length > 0;

          if(!error.is(':empty')) {
            elem.filter(':not(.valid)').qtip({
              overwrite: false,
              content: error,
              position: {
                my: corners[ flipIt ? 0 : 1 ],
                at: corners[ flipIt ? 1 : 0 ],
                viewport: $(window)
              },
              show: {
                event: false,
                ready: true
              },
              hide: false,
              style: {
                classes: 'ui-tooltip-blue'
              }
            })
            .qtip('option', 'content.text', error);
          }
          else { elem.qtip('destroy'); }
        },
        success: $.noop,
        debug: false
      });

$( "#number" ).rules( "add", {
        required: true,
    creditcard: true,
        messages: {
            required: "Credit Card Number is required",
        creditcard: "Invalid Credit Card Number"
  }
});

$( "#cvv" ).rules( "add", {
required: true,
        messages: {
            required: "CVV Invalid"
  }
});

  });

姓名は正しく検証されますが、カード番号を入力すると、最初の番号が検証され、CVV フィールドで同じメッセージ検証カードが繰り返されます。

このリンクを見てください: jsFiddle

私のコードは、この回答の例に基づいています: jQuery validate plugin adding multiple .rules() function

前もって感謝します！

ご挨拶。

4

1 に答える 1

1

jQuery 検証プラグインがname正しく機能するには、入力に属性が必要なようです。

<form id="braintree-payment-form">
    <input type="text" name="first_name" id="first_name" />
    <br/><br/>
    <input type="text" name="last_name" id="last_name" />
    <br/><br/>
    <input type="text" name="number" id="number" data-encrypted-name="number" />
    <br/><br/>
    <input type="text" name="cvv" id="cvv" data-encrypted-name="cvv" />
    <br/><br/>
    <input type="submit" />
</form>

ただし、braintree.js 内の暗号化メソッドは、name生のクレジット カード データをサーバーに送信できないように、暗号化する入力の属性を削除します。これにより、フォームを暗号化すると問題が発生する可能性がありますが、入力の検証は失敗します。通常、フォーム送信プロセスの最後のステップとして暗号化を実行することをお勧めします。

于 2014-01-15T21:34:17.717 に答える