Jquery验证插件和切换必填字段

Question

是的,基本上,我正在构建一个Web表单,需要提供所选国家/地区的不同所需表单和验证功能.

我在用

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

这是我的JS代码

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

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

基本上,我需要创建的是:

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.

问题:

当我第一次加载页面并单击带有空字段的"提交"按钮时,表单会成功验证每个字段并显示警告.无论选择赞比亚,验证都无效.

猜猜:

我在准备好的函数上删除了"setRequreForm();",如:

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

并试图选择赞比亚,并试图验证形式,它的工作原理.所以我认为两次调用"validate()"会导致错误.好吧,我坚持了一段时间.请帮我解决这个问题,我将非常感激.

Answer 1

你不能多次调用验证,因为你运行的验证插件不止一个,这会导致错误.

您可以像这样设置验证器:

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

Ignore告诉验证器:忽略css类的字段不应该被验证.

当你更改需求然后添加到指定的字段css类"忽略":

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

否则删除此类:

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