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

【问题标题】：Jquery validation plugin and switching required fieldJquery验证插件和切换必填字段
【发布时间】：2009-06-20 18:52:31
【问题描述】：

是的，基本上，我正在构建一个 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()”两次会导致错误。好吧，我坚持了一段时间。请帮我解决这个问题，我将非常感激。

【问题讨论】：

标签： javascript jquery validation forms

【解决方案1】：

您不能调用多个验证，因为您运行的验证插件不止一个，这会导致错误。

你可以像这样设置你的验证器：

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

Ignore 告诉验证器：不应验证具有忽略 css 类的字段。

当您更改需求时，然后添加到指定字段 css 类“忽略”：

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

否则删除这个类：

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

【讨论】：