1

我正在实现一种 Braintree（支付网关）形式，它要求信用卡字段具有以下属性：数据加密名称

这是我的表格：

<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 added 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 回答