Question

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

我正在使用

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

忽略告诉验证器：忽略css类的字段不应该被验证。

当您更改需求时，请添加到指定字段css class“ignore”：

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

否则删除此类：

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

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

1 个答案: