1

JQuery検証プラグインを使用するフォームがあり、デフォルト値から変更されていないフォームフィールド値を無視したいと考えています。

たとえば、クレジットカード更新フォームがあり、セキュリティのためにクレジットカード番号の最後の4つだけが表示されます。これは次のようになります。

** * * 5629

クレジットカードの最後の4つが異なるため、このデフォルト値はユーザーごとに異なります。

ユーザーがプロファイルの更新中にデフォルトのクレジットカードの値を変更しない場合は、明らかに有効なクレジットカード番号として検証されないため、このフォームフィールドの検証ルーティングをバイパスします。

現在の検証スニペットは次のとおりです。

card_number: {
  required: true,
  creditcard: true
}

messages: {
  card_number: {
    required: "Please enter a <strong>valid credit card number</strong>.",       
  }

そして、ここにフォームフィールドがあります：

<input type="text" name="card_number" id="card_number" title="Your credit card number." value="************ 5629" />

デフォルト値から変更されていないフォームフィールド値の検証を無視するにはどうすればよいですか？

ありがとう。

===============================================

アンドリューへの新しいメモ：

クレジットカードのTYPEの検証方法が原因で、少し問題が発生していると思います。

完全なスニペットと最初の修正は次のとおりです。

card_number: {
  creditcardtypes: function() {
    // return an object with a property named the same as the pay method
    var result = new Object();
    var propertyName = $('select[name="pay_method"]').val().toLowerCase();
    var propertyValue = 1;
    eval("result."+propertyName+"='"+propertyValue+"'");
    return result;
  },
  ccnotdefault: true,
  required: true
},

クレジットカードのTYPEルールにも対応するにはどうすればよいですか？現在、デフォルトのクレジットカードの値が有効なクレジットカードタイプではないため、検証は失敗します。

アンドリュー、ありがとう。

================================================

フォームフィールド：

          <!--- PAYMENT METHOD FIELD --->
      <tr>
        <td style="padding-top:15px; text-align:right; width:45%;"><label for="pay_method">&nbsp;Payment Method:
          <span class="orderlineredsm"><strong> * </strong></span></label></td>
        <td style="padding-top:15px; text-align:left; width:55%;" colspan="2" align="left" id="pmethod">
          <select name="pay_method" id="pay_method" class="highlightme required" style="width: 115px;" onchange="jQuery('#card_number').valid()" title="Your Payment Method.">
              <option value="Visa" <cfif form.pay_method EQ "Visa">selected="selected"</cfif>>Visa</option>
              <option value="Mastercard" <cfif form.pay_method EQ "Mastercard">selected="selected"</cfif>>Mastercard</option>
              <option value="Amex" <cfif form.pay_method EQ "Amex">selected="selected"</cfif>>Amex</option>
              <option value="Discover" <cfif form.pay_method EQ "Discover">selected="selected"</cfif>>Discover</option>
              <option value="Diners" <cfif form.pay_method EQ "Diners">selected="selected"</cfif>>Diners</option>
          </select>
        </td>
      </tr>
      <!--- END PAYMENT METHOD FIELD --->

      <!--- CARD NUMBER FIELD --->
      <tr>
        <td style="text-align:right; width:45%;"><label for="card_number">&nbsp;Credit Card Number:
          <span class="orderlineredsm"><strong> * </strong></span></label></td>
        <td style="text-align:left; width:55%;" colspan="2" align="left" id="cnumber">
          <input type="text" name="card_number" id="card_number" class="highlightme" style="width: 130px;" maxlength="19" title="Your credit card number." value="************<cfoutput>#form.card_number#</cfoutput>" onfocus="clearText(this)" onblur="clearText(this)" />
          &nbsp;<span class="create-tooltip" title="For your protection and security, only the <strong>last four digits of your credit card number</strong> are shown.<br /><br /><strong>NOTE:</strong> Only change if you are updating your credit card number."><img src="/public/images/help_25.png" style="margin-bottom:1px;" alt="help" width="25" height="25" /></span>
        </td>
      </tr>
      <!--- CARD NUMBER FIELD --->

================================================== ========

可能な修正

card_number: {
  ccnotdefault: function(){ return $('#pay_method').val(); },
  required: true
},

jQuery.validator.addMethod("ccnotdefault", function(value, element, param) {
  // if the element is optional, don't validate 
  return this.optional(element) ||
  // or if the value is equal to the default value
  (value === element.defaultValue || 
  // or, finally, if the cc number is valid
  jQuery.validator.methods.creditcard2.call(this, value, element, param));
}, jQuery.validator.messages.creditcard);

http://www.ihwy.com/labs/downloads/jquery-validate-creditcard-2/jquery.validate.creditcard2-1.0.1.js
4

1 に答える 1

2

デフォルトのクレジットカードルールを呼び出すだけでなく、フィールドのデフォルト値も考慮に入れるカスタムルールを作成します。

$.validator.addMethod("ccnotdefault", function(value, element) {
    // if the element is optional, don't validate 
    return this.optional(element) ||
       // or if the value is equal to the default value
       (value === element.defaultValue || 
       // or, finally, if the cc number is valid
       $.validator.methods.creditcard.call(this, value, element));
}, $.validator.messages.creditcard);

$(document).ready(function() {
    $("#myform").validate({
        rules: {
            card_number: {
                ccnotdefault: true,
                required: true
            }
        }
    });
});

例： http： //jsbin.com/ejonid/2/

于 2012-06-12T15:20:06.150 に答える