如何传递 jQuery 信用卡验证 pawel decowski 的表单值答案

【问题标题】：How to pass form values of jQuery Credit card validation pawel decowski如何传递 jQuery 信用卡验证 pawel decowski 的表单值
【发布时间】：2012-11-12 02:42:45
【问题描述】：

我正在使用jQuery Credit Card Validator by Pawel Decowski 并希望将信用卡类型与其他信用卡详细信息一起传递。他的模板效果很好，我适应了我设计的网站。表单的所有值都通过了，但只有一个。 卡片类型 - 我无法将此值传递给操作，因为它只是 <li>，而不是输入元素。

Javascript

(function() {

  $(function() {
    $('.demo .numbers li').wrapInner('<a href="#"></a>').click(function(e) {
      e.preventDefault();
      return $('#card_number').val($(this).text()).trigger('input');
    });
    $('.vertical.maestro').hide().css({
      opacity: 0
    });
    return $('#card_number').validateCreditCard(function(result) {
      if (!(result.card_type != null)) {
        $('.cards li').removeClass('off');
        $('#card_number').removeClass('valid');
        $('.vertical.maestro').slideUp({
          duration: 200
        }).animate({
          opacity: 0
        }, {
          queue: false,
          duration: 200
        });
        return;
      }
      $('.cards li').addClass('off');
      $('.cards .' + result.card_type.name).removeClass('off');
      if (result.card_type.name === 'maestro') {
        $('.vertical.maestro').slideDown({
          duration: 200
        }).animate({
          opacity: 1
        }, {
          queue: false
        });
      } else {
        $('.vertical.maestro').slideUp({
          duration: 200
        }).animate({
          opacity: 0
        }, {
          queue: false,
          duration: 200
        });
      }
      if (result.length_valid && result.luhn_valid) {
        return $('#card_number').addClass('valid');
      } else {
        return $('#card_number').removeClass('valid');
      }
    });
  });

}).call(this);

如果你们想玩的话，我有我自己的现场版小提琴。 http://jsfiddle.net/cpR6b/

请推荐

【问题讨论】：

标签： jquery validation credit-card

【解决方案1】：

我会创建一个隐藏的表单域。类似<input type="hidden" id="cardType" value="" />。

然后您可以简单地添加一些 jQuery 逻辑并将其设置为您想要的任何值。像$('#cardType').val(result.card_type.name) 这样的东西可能对你很有效。

【讨论】：

嗨 Clay，我之前尝试过隐藏输入，但没有成功。然而，我不知道哪个 id 指的是卡片类型，因为没有线可以告诉。 :(你试过我的小提琴吗？
没有线路可言？将隐藏的输入放在您的页面上。然后将@Clay 的jquery 行放到此行下面的pawel 代码中：$('.cards .' + result.card_type.name).removeClass('off');
克莱，谢谢你的建议。 :)
大家好，我是 jCCV 的开发者。这是我的首选解决方案。 result.card_type.name 变量保存实际的卡类型。当前接受的答案是依赖于插件演示页面代码的 hack。但是，不要使用 ethorn10 的建议来修改插件的代码——没有必要。只需将 Clay 的代码放在 if (result.length_valid && result.luhn_valid) { } 块中即可。

【解决方案2】：

见http://jsfiddle.net/jGESR/

伪代码

添加到表单标签

 <input type='hidden' id='ccType' name='ccType' />

添加到 JS（假设 li 类名 [.card] 将包含一个类名，即卡片类型）

 .....
 // check to make sure only one of the card is highlighted)
 if($(".cards li:not('.off')").length == 1){
     $('#ccType').val($(".cards li:not('.off')").attr('class'))
 }

 ...
 if (result.length_valid && result.luhn_valid) {
    return $('#card_number').addClass('valid');
 } else {
    return $('#card_number').removeClass('valid');
 }

【讨论】：

这依赖于演示代码的 HTML 结构，而不是核心库。您可以直接访问卡类型：if (result.length_valid && result.luhn_valid) { $('#ccType').val(result.card_type.name) }