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 bee required.
2.When user select Zambia on country selection, the State and Zip area bee 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.

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 bee required.
2.When user select Zambia on country selection, the State and Zip area bee 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.

• javascript
• jquery
• validation
• forms

Share Follow edited Jul 19, 2009 at 1:34 sth 230k5656 gold badges287287 silver badges370370 bronze badges asked Jun 20, 2009 at 18:52 chrischris 14822 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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");