使用 jquery validate 删除特定字段的错误消息

Question

我有一个简单的表格，如下所示。我单击了一次提交按钮，所有 jquery 验证消息都出现了（如红色所示）。但是，在取消选中 Sports Event 的 Call 复选框后，我想删除所有与 Sports Event 关联的 jquery validate 消息。我怎样才能做到这一点？目前，如果我再次选中 Call 复选框，仍然会显示验证消息。

请看下面的代码：

 //if call checkbox is checked, display the phoneNo and attendeesNo field
    function toggleCall(){
        if (document.getElementById("callCheckbox").checked == true) {
            document.getElementById('phoneNo').style.display = "";
            document.getElementById('attendeesNo').style.display = "";
        } else {
            document.getElementById('phoneNo').style.display = "none";
            document.getElementById('attendeesNo').style.display = "none";
        }
    }

HTML 代码：

<tr>
    <td>
        <input type="checkbox" name="callCheckbox" id="callCheckbox" value="true" onclick="toggleCall()" />
    </td>
    <td>
        <input type="checkbox" name="emailCheckbox" id="emailCheckbox" value="true" onclick="toggleEmail()" />
    </td>
    <td> Sports Event 
        <br>
        <div id="sportsEvent" style="display:none;">
            <label> Enter a phone number: </label>
            <input type="text" name="phoneNo" id="phoneNo">
            <br>
            <label> No. of attendees: </label>
            <input type="text" name="attendeesNo" id="attendeesNo">
        </div>
    </td>
</tr>

jquery验证方法

<script type="text/javascript">
    //jquery validation Script
    var _global_validator = null;

    $(document).ready(
        function() {
            $("#submitForm").validate( {
                rules: {
                    phoneNo: {
                        required: function (element) {
                                if($("#callCheckbox").is(':checked')){
                                        var e = document.getElementById("phoneNo");
                                        if(e.value==""){
                                            return true;  
                                        }
                                        else{
                                            return false;
                                        } 
                                }
                                else{
                                    return false;
                                }    
                            } 
                      },
                      attendeesNo: {
                        required: function (element) {
                                if($("#callCheckbox").is(':checked')){
                                    var e = document.getElementById("attendeesNo");
                                    if(e.value==""){
                                        return true;  
                                    }
                                    else{
                                        return false;
                                    } 
                                }
                                else {
                                    return false;
                                }  
                        } 
                      },

                    errorElement : "small",

                    invalidHandler : function(e, validator) {
                        _global_validator = validator;
                        //renderDropdownUIValidation(validator);
                        renderCheckableUIValidation(validator);
                    },

                    errorPlacement : function(error, element) {
                        error.insertAfter(element);
                    },

                    messages : {
                        phoneNo: {
                                required: '<Please enter phone number>',
                        },
                        attendeesNo: {
                                required: '<Please enter no. of attendees>',
                        },
                    },

                    submitHandler: function(form) {
                            form.submit();
                    }
                }

            }); //end validate
        });

    </script>

Answer 1

您绝对没有显示任何代码，因此我无法为您的问题编写自定义解决方案。我什至不知道您控制表单的验证规则。单击复选框是否已经更改了文本框的规则？换句话说，文本字段的验证是否取决于复选框？你至少写过那段代码吗？

您可能还需要在复选框上编写change 处理函数，以编程方式强制重新验证文本字段。这假定取消选中复选框时满足所有验证规则。

$('#yourform').validate({  // <- plugin initialization
    // rules, options, etc.
});

$('#your_checkbox').on('change', function() {
    $('#your_textfield').valid(); // <- force re-validation
});

否则，请post an MCVE 让问题得到有意义的回答。

---

编辑：

在 OP 发布代码后，很明显只需要条件规则。 条件规则正确声明后，消息会自动显示/隐藏...无需特殊代码。

还有其他几个问题...

1. 您已将所有.validate() 方法选项放在rules 对象中。 rules 对象是其他选项的兄弟。验证完全被这个破坏了。

2. 您不能在自定义错误消息中放置 < 或 >，因为这会被解释为 HTML 元素。请改用< 和>，然后将它们呈现为< 和>。

3. 有些东西破坏了您的 invalidHandler 选项。修复或删除它。

4. 删除内联 JavaScript 点击处理程序并替换为 jQuery 处理程序函数。您正在使用 jQuery，它使所有内联 JavaScript 完全过时。如果 JavaScript 不是随机混入您的 HTML 标记中，也更容易对它进行故障排除。

5. 删除 jQuery 代码中的 getElementById 并替换为标准 jQuery 选择器。同样，您使用的是 jQuery，它可以规范跨浏览器的元素选择。 document.getElementById('my_element') 可以简单地替换为 jQuery 的 id 选择器 $('#my_element')。

6. 在.validate() rules 内，仅当字段本身为空时，有条件地将required 应用于字段是绝对没有意义的。如果该字段是required，那么它首先不能留空。在您的情况下，required 只需根据复选框设置为条件即可。

此演示将为您指明正确的方向。单击第一个复选框以查看文本元素。由于插件本身，错误消息将根据用户输入自动显示/隐藏。

http://jsfiddle.net/4v0j181L/

Answer 2

$(document).ready(function () {
})   // inside this you need to write 

1. ## If drop down list ##
$('#serviceType').on('change', function () {
            if ($('#serviceType').text() != '') {
                $('#Error-ServiceType').hide();
            }
        });

2. ## If text box ##
$('#rateperhr').on('keyup keypress change', function () {
            if ($('#rateperhr').val() != '') {
                $('#Err_rateperhour').hide();
            }
        });

Answer 3

$(.your_form_class_name).validate().resetForm();