JQuery validation plugin and required switch field

Basically, I create a web form that should provide the various required form and validation function for the selected country.

I use

<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, I need to create:

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 you first load the page and click "Submit" with an empty field, the form successfully checks all the fields and displays a warning. However, the choice of Zambia, validation does not work.

guess

I removed setRequreForm (); "on the finished function, for example:

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

And tried to choose Zambia and tried to check the form, and it works. Therefore, I think that calling "validate ()" twice causes an error. Well, I've been stuck with this for a while. Please help me figure this out, I will be very grateful.

+3
1

- , , .

:

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

validator: , css, .

css "ignore":

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

:

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

Source: https://habr.com/ru/post/1710921/


All Articles