jQuery验证独立元素共享一个验证测试

我正在处理简单的帐单信息表单以收集信用卡信息。jQuery验证独立元素共享一个验证测试

我有两个选择输入：

<select class="form-control exp_month exp" id="expiration_month" name="expiration_month"> 
<select class="form-control exp_year exp" id="expiration_year" name="expiration_year">

我想有单独的“必要”的字段中的错误（即“选择月”，“选择年”），但是，我还需要有当日期比今天更早时出现共享错误，因此如果更新了任一个月或每年，并且这是较早的日期，则用户将只看到一个“选择未来日期”消息。

我玩弄了validator.addMethod（“exp”）和验证器errorPlacement，但好像每个修补程序都让我打破了别的。

编辑：

jQuery.validator.addMethod("exp", function (value, element) { 

    if ($('.exp_year').val() != "" && $('.exp_month').val() != "" && new Date($('.exp_year').val(), $('.exp_month').val()) < Date.now()) { 
     $.validator.messages.exp = "Please select a future expiration date."; 
     return false; 
    } 
    return true; 
}, "Please select something."); 


var validator = $("#new-card-form").first().validate({ 
    rules: { 
     expiration_month: 'required', 
     expiration_year: 'required' 
    }, 
    groups: { 
     //ExpirationDate: "expiration_month expiration_year" 
    }, 
    messages: { 
     expiration_month: 'Please select a month.', 
     expiration_year: 'Please select a year.' 
    }, 
    errorPlacement: function (error, element) { 
     if (element.hasClass("exp")) { 
      if ($(".exp_past").length == 0) { 
       error.insertAfter(".exp_month"); 
       error.addClass("exp_past"); 
      } 
      $(".exp").valid(); // used to remove error class from both dates 

     } 
     else 
      error.insertAfter(element); 
    } 
});

来源

2014-12-30 edank

当你的选择器瞄准一个'id'时，你不需要使用'.first（）'。由于'id'对页面来说是唯一的，因此它总是首先出现。 – Sparky

您可以对每个字段的错误消息，同时可以选择group messages from certain fields together。

AFAIK，没有办法有条件地将分组在一起。 也没有提供方法动态切换.validate()的选项。

可能的修复方法是使用单个字段输入到期日期。您可以使用自定义方法来确保单个字段的格式正确。

BTW：

$("#new-card-form").first().validate({ ...

的.first()的使用完全是多余的，当你选择的目标是一个id。由于任何id对页面而言都是唯一的，因此它将成为第一个，也是最后一个，也是唯一一个。如果您多次使用相同的id，那么您的HTML无效，页面可能会被破坏。

来源

2014-12-30 22:00:07 Sparky

jQuery验证独立元素共享一个验证测试

回答

相关问题