jQueryの検証がうまくいきません。

Question

私は、ユーザーに支払いの詳細を入力するページがあります。これには、請求およびクレジットカード/小切手の口座情報が含まれます。彼らがこのページをヒットした最初の時間に、すべてのバリデーションルールが正しく発動します。彼らは次に彼らが入力したすべてを示す要約ページに彼らを連れて行き、彼らが支払いを提出するか、または編集ボタンを押して、前のページに戻り、彼らが望むフィールドを更新することができます。

ただし、編集中の場合、検証規則はそれ以上使用できません。

はい、はい、サーバー側の検証も実装されているため、これは実際にケーキでアイシングしていますが、ポストバックを待たされていない場合には、ユーザーエクスペリエンスが向上します。

私は検証プラグイン1.8.1でjQuery 1.4.4を使用しています。多くのバリデーションルールがありますので、私はそれらをhtmlで参照されている独自の.jsファイルに分割しています。

バリデーターjsファイルのコードを添付しました。 （VB.NetのResponse.Redirectを使用してページに戻る）再試行した後にのみ、動作を停止します。Firebugでデバッグすると、$(document).ready()ブロック内にブレークポイントを配置できません。

// JScript File 

$.validator.addMethod('postalCode', function (value, element) { 
    return this.optional(element) || /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A- Z]\d))$/.test(value); 
}, 'Please enter a valid US or Canadian postal code.'); 

$.validator.addMethod('cvnnum', function (value, element) { 
    return this.optional(element) || /^((\d{3})|(\d{4}))$/.test(value); 
}, 'Please enter a valid CVN.'); 

$.validator.addMethod('CCExp', function(value, element, params) { 
     var minMonth = new Date().getMonth() + 1; 
     var minYear = new Date().getFullYear(); 
     var month = parseInt($(params.month).val(), 10); 
     var year = parseInt($(params.year).val(), 10); 
     return this.optional(element) || ((year > minYear || (year === minYear && month >= minMonth))); 
}, 'Please select a valid expiration date.'); 

$.validator.addMethod('routingnum', function (value, element) { 
     // algorithm taken from: http://www.brainjar.com/js/validation/ 

    var t = value; 
    n = 0; 
    for (i = 0; i < t.length; i += 3) { 
     n += parseInt(t.charAt(i), 10) * 3 
      + parseInt(t.charAt(i + 1), 10) * 7 
      + parseInt(t.charAt(i + 2), 10); 
    } 

    // If the resulting sum is an even multiple of ten (but not zero), 
    // the aba routing number is good. 

    if (n != 0 && n % 10 == 0) 
     return true; 
    else 
     return (this.optional(element) || false); 

}, 'Please enter a valid routing number.'); 


$.validator.addMethod("phoneUS", function(phone_number, element) { 
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 && 
     phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/); 
}, "Please specify a valid phone number"); 

//had to rewrite equalTo as it didn't follow the required or depends properties correctly.. 
$.validator.addMethod("myEqualTo", function (value, element, param) { 
    return this.optional(element) || value === $(param).val(); 
}, jQuery.format("You must enter {0}")); 


$(document).ready(function() { 

$("#form1").validate({ 
    rules: { 
     PayType: { required: true }, 
     Email: { required: true }, 
     txtCCFullName: { required: isCreditCard }, 
     txtCCFName: { required: isCreditCard }, 
     txtCCLName: { required: isCreditCard }, 
     txtCCNumber: { creditcard: true, required: isCreditCard }, 
     txtCCSecurityNum: { cvnnum: true, required: isCreditCard }, 
     ddlCCExpYear: { 
      required: isCreditCard, 
      CCExp: { 
       month: '#ddlCCExpMonth', 
       year: '#ddlCCExpYear' 
      } 
     }, 
     txtCCAdd1: { required: isCreditCard }, 
     txtCCCity: { required: isCreditCard }, 
     txtCCState: { required: isCreditCard }, 
     txtCCZip: { postalCode: true, required: isCreditCard }, 
     txtAmtOther: { 
      number: true, 
      required: function() { return $('input[name=PayType][value=rbtAmtOther]:checked').length > 0; } 
     }, 
     txtACHRoutingNum: { routingnum: true, required: isACH }, 
     txtACHAcctNum: { number: true, required: isACH }, 
     txtACHFName: { required: isACH }, 
     txtACHLName: { required: isACH }, 
     txtACHAdd1: { required: isACH }, 
     txtACHCity: { required: isACH }, 
     txtACHState: { required: isACH }, 
     txtACHZip: { postalCode: true, required: isACH }, 
     txtPayorEmail: { 
      email: true, 
      required: { 
       depends: function (element) { return $('input[id=rbtEmailYes]:checked').length > 0; } 
      } 

     }, 
     txtConfEmail: { 
      myEqualTo: '#txtPayorEmail', 
      //required: false 
      required: { 
       depends: function (element) { 
        return ($('div[id=ConfirmEmail]:visible').length > 0) && ($('input[id=rbtEmailYes]:checked').length > 0); 
       } 
      } 
     } 

    }, 
    messages: { 
     Email: { required: 'Please answer the payor email question.' }, 
     PayType: { required: 'Please select a payment type.' }, 
     // blank messages suppress the individual error messages 
     txtCCFullName: { required: '' }, 
     txtCCFName: { required: '' }, 
     txtCCLName: { required: '' }, 
     txtCCNumber: { required: '' }, 
     txtCCSecurityNum: { required: '' }, 
     txtAmtOther: { required: '' }, 
     txtACHFName: { required: '' }, 
     txtACHLName: { required: '' }, 
     txtACHRoutingNum: { required: '' }, 
     txtACHAcctNum: { required: '' }, 
     txtACHAdd1: { required: '' }, 
     txtACHCity: { required: '' }, 
     txtACHState: { required: '' }, 
     txtACHZip: { required: '' }, 
     txtCCAdd1: { required: '' }, 
     txtCCCity: { required: '' }, 
     txtCCState: { required: '' }, 
     txtCCZip: { required: '' }, 
     txtPayorEmail: { required: '' }, 
     txtConfEmail: { required: '', myEqualTo: 'The email addresses do not match.' } 

    }, 
    onfocusout: function (element) { 
     // if either of the email fields, immediately validate, otherwise let the normal behavior happen 
     switch ($(element).attr('id')) { 
      // validate these on focus lost 
      case 'txtPayorEmail': 
      case 'txtConfEmail': 
      case 'txtCCNumber': 
      case 'txtCCSecurityNum': 
      case 'txtCCZip': 
      case 'txtACHRoutingNum': 
      case 'txtACHAcctNum': 
      case 'txtACHZip': 
       $(element).valid(); 
       break; 
      default: 
       $(element).valid(); 
       // do nothing for the others, they get validated on form submit 
       break; 
     } 
    }, 
    errorLabelContainer: $("#form1 div.error"), 
    ignore: ":hidden", 
    onkeyup: false 
    //,debug:true 
}); 

}); 

function isCreditCard() { 
    return $('input[name=PayType][value=rbtCC]:checked').length > 0; 
} 
function isACH() { 
    return $('input[name=PayType][value=rbtACH]:checked').length > 0; 
} 
function isEmailed() { 
    return $('input[id=rbtEmailYes]:checked').length > 0; 
} 

アップデート：FirefoxとChromeの2つのブラウザでこれを試したところ、2回目の検証はもう行われませんでした。

UPDATE＃2 ... FF特有のバグではなく、私はめちゃくちゃだという標準化何かであるようには見えない：それは第三&第四のブラウザですので、同様オペラ& IE 8で発生します今このように行動する。

これらのテストは、httpsで実行されていますが、ローカルではhttpだけであるため、両方のシナリオで問題が発生します。

編集中にページを更新するためにCTRL-F5を試しましたが、同じ動作が残ります。

第1回から第2回までのライブHTTPヘッダーを調べましたが、ファイルへのアクセス方法には違いはありません。すべてのjsファイルが両方ともロードされ、サーバーは両方ともHTTP/1.1 200 OKで応答します。

私のjavascriptファイルは、@Cos Callisによって提供されるリンクの@Ganztollと同じですが、彼はPHPを使用していますが、.NETにあります動的にそれをハードコーディングされたままにしておく。ブラウザはまったく同じ結果をいずれかの方法で見て、それに応じて処理する必要があります。サーバー側のインクルードなどを使ってそれを行うことができます。

その他のヘルプや説明は大歓迎です。

Answer 1

私は新鮮な目で見直した後、私はぼんやりしています。情報を編集するときに起動される初期化コードで$('#form1').validate.resetForm()と呼んでいたことがわかりました。私の検証ルーチンを再利用して、それに依存しないように規則を追加/削除すると、この不思議な問題はなくなりました。