jQuery Validate Plug-in 无法验证前半部分的问题

Posted 2023-05-09

【中文标题】jQuery Validate Plug-in 无法验证前半部分的问题

【英文标题】：Problem with jQuery Validate Plug-in not validating first half form

【发布时间】：2011-07-16 05:31:47

【问题描述】：

我将 jQuery 与 Validate Plugin 和 Nathan Long 的绝妙方法 require_from_group 一起使用，不幸的是，我在验证表单内的其他字段时遇到了问题。

必填字段集之上的任何内容都无法正确显示其错误消息。

这个（加上 jQuery 1.4.2 和验证插件）是我的代码：

<form>

<label for="fullName">Name <em>required</em></label>
<input id="fullName" name="fullName" type="text" class="required"><br />

<fieldset>
<legend>Enter 1 of 3 emails <em> required</em></legend>
<label for="field1">field1</label><input id="field1" class="group_required email" type="text" name="field1" /><br />
<label for="field2">field2</label><input id="field2" class="group_required email" type="text" name="field2" /><br />
<label for="field3">field3</label><input id="field3" class="group_required email" type="text" name="field3" /><br />
</fieldset>

<input name="submitbutton" type="submit" />

</form>


<script>
jQuery.validator.addMethod("require_from_group", function(value, element, options) 
    numberRequired = options[0];
    selector = options[1];
    //Look for our selector within the parent form
    var validOrNot = $(selector, element.form).filter(function() 
         // Each field is kept if it has a value
         return $(this).val();
         // Set to true if there are enough, else to false
      ).length >= numberRequired;

        if(!$(element).data('being_validated')) 
            var fields = $(selector, element.form);
            //.valid() means "validate using all applicable rules" (which 
            //includes this one)
            fields.data('being_validated', true).valid();
            fields.data('being_validated', false);
        
        return validOrNot;
        // 0 below is the 0th item in the options field
    , jQuery.format("Please fill out at least 0 of these fields."));


$(document).ready(function()

    $("form").validate(
         debug: true,
    );

    jQuery.validator.addClassRules("group_required", require_from_group: [1, ".group_required"]);

);

</script>

实际页面更复杂，但这就是您复制问题所需的所有代码。在不填写任何字段的情况下提交表单，您将在组中的 3 旁边看到一条错误消息，而不是名称字段。如果名称字段在字段集验证后位于 html 中，则它可以正常工作。赋予名称字段焦点然后模糊确实会产生正确的错误消息，但它没有出现在提交时。

我在原始问题的 cmets 中看到其他人遇到此问题，但没有看到任何回复 :(

注释掉：

fields.data('being_validated', true).valid();

修复了错误消息显示问题，但重新引入了 Nathan 试图解决的问题。

【参考方案1】：

其他字段不需要添加规则吗？

$("form").validate(
    debug: true,
    rules: 
        'fullName': 
            required: true
        
    
);

【讨论】：

'class="required"' 足以让 fullName 字段根据需要进行验证。如果我点击进出该字段，它就会起作用。