Question

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

请参阅以下代码：

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

form

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发布代码之后，很明显条件规则就是所需要的。 正确声明条件规则后，消息将自动显示/隐藏......不需要特殊代码。

还有其他一些问题......

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

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

有些东西违反了invalidHandler选项。修复或删除它。

删除内联JavaScript单击处理程序并替换为jQuery处理程序函数。您正在使用jQuery，它使所有内联JavaScript完全过时。当JavaScript没有随机混合到您的HTML标记中时，也可以更轻松地解决问题。

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

在.validate() rules中，只有在字段本身为空时才有条件地将required应用于字段是完全没有意义的。如果该字段为required，则首先不能将其留空。在您的情况下，required只需根据复选框设置为条件。

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

<强> http://jsfiddle.net/4v0j181L/

Answer 2

$（。your_form_class_name）.validate（）。resetForm（）;

Answer 3

GC.Collect();
 GC.WaitForPendingFinalizers();

使用jquery validate

3 个答案: