2011-01-13 9 views
2

私は、ユーザーが今すぐクレジットカードで支払うか、小切手で支払うかを選択できる登録システムを持っています。彼らが今クレジットカードで支払うことを選択した場合、クレジットカード情報を保持するフィールドを検証する必要があります。ただし、後で小切手で支払いを選択すると、クレジットカード情報を保持するフィールドを非表示にする必要があります。そのため、これらのフィールドの検証もオフにする必要があります。ここでチェックボックスに基づくjQueryによる検証

$('.cc_check').click(function(){ 


    $('.ccinfo').toggle() 

    if($(".ccinfo").is(":visible")){ 
    $(".cc").validate({ 
    rules: { 
     card_number: { 
     required: true, 
     digits: true, 
     creditcard: true 
     }, 
     card_holder:{ 
     required: true 
     }, 
     card_month: { 
     required: true, 
     digits: true, 
     minlength: 2, 
     maxlength: 2, 
     min: 1, 
     max: 12 
     }, 
     card_year: { 
     required: true, 
     digits: true, 
     minlength: 2, 
     maxlength: 2, 
     min: 11 
     } 
    }, 
    messages: { 
     card_number: { 
     required: "Please enter a credit card number" 
     }, 
     card_holder:{ 
     required: "Please enter a credit card holder" 
     }, 
     card_month: { 
     required: "Please enter a credit card expiring month", 
     min: "That is not a month", 
     max: "That is not a month" 
     }, 
     card_year: { 
     required: "Please enter a credit card expiring year", 
     min: "That year is in the past"  
     } 
    } 
    }); 
    } 
    }); 

対応するHTMLコードです:これは私が理解してjQueryのためのコードは動作するはずです

だから私の質問は本当に私が欠けているものがあるのですか?ユーザーがクラスのチェックボックスをクリックすると、ccinfoクラスのテーブル行が表示されなくなります。また、if文が動作し、ccinfoが見えるときにif文が内部に入ることを確認しました。クラス名に基づいて検証することはできません。これは、クラス名がccの個々のテキストボックスを検証しようとしているためです。

何か助けていただければ幸いです。これは数日間問題を抱えています。

答えて

3

妥当性検査を無効にしたい要素にdisabled属性を設定します(この属性を設定すると検証が無効になります)。これを念頭に置いて、あなたのコードはvalidate()に一つだけの呼び出しで、非常に簡単になる(私はそれを変更しなかったため、セットアップコードは省略検証し、私は間違いなくクリックハンドラの外に移動します):

$('.cc_check').click(function() { 
    var $ccInfo = $(".ccinfo"); 
    var $inputs = $(".cc input:not(.cc_check):not(:submit)"); 
    $ccInfo.toggle(); 
    if ($ccInfo.is(":visible")) {   
     $inputs.removeAttr("disabled"); 
    } 
    else { 
     $inputs.attr("disabled", "disabled"); 
    } 
}); 

を参照してください。ここの実例はhttp://jsfiddle.net/andrewwhitaker/PMTTK/です。チェックボックスをオンにすると、正しいフィールドが無効になり、フォームが正常に送信されます。検証は、disabled属性が削除されると再び有効になります。

+0

この行の機能を明確にすることはできますか? var $ inputs = $( ".cc入力:not(.cc_check):not(:submit)"); – Chris

+0

@Chris:確か:クラス '.cc_check'を持たないクラス' .cc'を持つ要素の下にあるすべての入力を得るか、 'submit'型です –

関連する問題