Jquery validation plugin and switching required field

Question

Yup, basically, I am building a web form that need to provide different required form and validation function fallow by selected country.

I am using

<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>

and here is my JS code

 <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>

Here is my HTML:

<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>

Basically, what I need to create is:

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.

Problem:

When I first load the page and click the Submit button with empty field, the form successfully validate each fields and shows warning. However selecting of the Zambia, the validation is not working.

Guess:

I have removed “setRequreForm ();” on ready function like:

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

And tried to select Zambia, and tried to validate the form and it works. So I think calling “validate()” twice causes error. Well I stuck with this for a while. Please help me to figure this out, I will really appreciate that.

Answer 1

You can't call validate more than ones becouse you run validate plugin more than one and this lead to errors.

You can setup your validator like this:

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

Ignore tells to validator: field which has ignore css class should not be validated.

When you change requirements then add to specified fields css class "ignore":

$("#field1").addClass("ignore");

otherwise remove this class:

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