2009-06-20 9 views
3

基本的に、私は、選択された国によって異なる必要なフォームと検証関数を提供する必要があるWebフォームを構築しています。私はここにJqueryの検証プラグインとスイッチの必要なフィールド

<script type="text/javascript" src=" jquery-1.3.2.min.js" charset="utf-8"></script> 
<script type="text/javascript" src=" jquery.validate.js" charset="utf-8"></script> 

とを使用しています

ここ
<script type="text/javascript" charset="utf-8"> 
function updatRequreForm (STATE,ZIPCODE) { 
    $("#frm_verification").validate({ 
      rules: { 
       'form[country]' : "required", 
       'form[state]' : {required: STATE}, 
       'form[zip]': {required: ZIPCODE}, 
       }, 

      messages: { 
       'form[country]' : "This field is required.", 
       'form[state]' : "This field is required.", 
       'form[zip]': "This field is required.", 
     }); 
}; 


function setRequreForm() { 
    var _cs = $('#country_select')[0]; 

    if ('US' != _cs.value) 
    { 
     $('#state_star')[0].innerHTML = ''; 
     $('#zip_star')[0].innerHTML = ''; 
     updatRequreForm (false,false); 
    } 
    else 
    { 
     $('#state_star')[0].innerHTML = '*'; 
     $('#zip_star')[0].innerHTML = '*'; 
     updatRequreForm (true,true); 
    } 
};  


$(document).ready(function() { 
    setRequreForm(); 
    $('#country_select').change(function(){ 
     setRequreForm(); 
    }); 
}); 

</script> 

は私のHTMLである私のJSコードです:

<form id="frm_verification" action="some.php" method="POST"> 

<label for="country_select"><sup>*</sup>Country:</label> 
<select name="form[country]" id="country_select"> 
    <option value="">- Select -</option> 
    <option value="US" selected="selected">United States</option> 
    <option value="ZM">Zambia</option> 
    <option value="ZW">Zimbabwe</option> 
</select> 


<label for="select-state"><sup id="state_star">*</sup>State/Province/Region:</label> 
    <span id="states_select"> 
     <select id="select-state" name="form[state]"> 
      <option value="">- Select -</option> 
      <option value="AK">Alaska</option> 
     </select> 
    </span> 

    <span id="states_text" style="display:none;"> 
    <input type="text" name="form[state]" value="" id="state" /> 
    </span> 

<label for="zip_code"><sup id="zip_star">*</sup>ZIP/Postal Code:</label> 
<input type="text" id="zip_code" name="form[zip]" value="" id="zip"> 

<input type="submit" value="Submit" id="submit_btn" class="submit"> 
</form> 

のBa sically、私が作成する必要があることです。

1.When user select US on country selection, the State and Zip area become required. 
2.When user select Zambia on country selection, the State and Zip area become non-required. 

問題:私は最初のページをロードし、空のフィールドで[送信]ボタンをクリックすると

は、フォームが正常に各フィールドを検証し、警告を示しています。ザンビアを選んだにもかかわらず、検証は機能していない。

$(document).ready(function() { 
    //setRequreForm(); 
    $('#country_select').change(function(){ 
     setRequreForm(); 
    }); 
}); 

、ザンビアを選択しようとしました、そしてフォームを検証しようとしましたが、それは動作します:;:

推測は次のようにレディ機能の「setRequreFormを()」

私は削除しました。だから私は "validate()"を2回呼び出すとエラーが発生すると思います。 さて、私はしばらくこのことにこだわりました。これを理解するのを手伝ってください、本当に感謝します。

答えて

5

validateプラグインを複数実行すると、複数のvalidateを呼び出すことはできません。これはエラーにつながります。

あなたは、このようなセットアップあなたのバリデータをすることができます:CSSクラスを無視しているフィールドを検証すべきではありません。

$("#myform").validate({ 
    ignore: ".ignore" 
}) 

はバリするように指示無視します。

あなたは要件は、指定したフィールドのCSSクラスに追加変更

"無視":
$("#field1").addClass("ignore"); 

がそうでなければ、このクラスを削除します。

$("#field2").removeClass("ignore"); 
+0

おかげで、それが動作します。 ;-) – chris

+0

問題ありません。してください、答えとしてこの答えをマークしてください:) – dariol

関連する問題