仅使用 jQuery 类验证可见字段答案

【问题标题】：Validate only visible fields with jQuery classes仅使用 jQuery 类验证可见字段
【发布时间】：2011-12-08 22:09:43
【问题描述】：

我正在使用 jQuery 验证来验证表单。

为此，我只在字段中添加了一个特定的类（“必填”、“电子邮件”等）。

例如：<input id="form_linom" class="required" type="text" value="" name="form_linom" size="50">

由于是一个大而动态的表单（某些字段中的选择隐藏或显示其他字段）我在提交表单时遇到问题，因为验证器不允许将数据发送到服务器，因为它也在验证隐藏字段。

我将类添加到每个字段的方式是在 PHP 中创建一个包含所有必需字段的数组，然后如果该字段在该数组中，则添加该类。

请在回答之前阅读问题。我对那些只批评这个问题的没有相关和“简单”的答案感到不舒服。我发布了我用来验证的所有代码。我唯一放的另一件事是在标题中：

$("#form_proyecto").validate();

我在http://jsfiddle.net/yW73h/ 中发布了代码，看起来电子邮件字段已隐藏但无法发送表单。我需要一个通用规则来收集所有隐藏的必填字段，而不仅仅是示例中的电子邮件字段（在我的真实表单中，我有 54 个字段）。

【问题讨论】：

表示jQuery用来验证的类：required、email等。见问题中的例子。

标签： jquery validation jquery-validate

【解决方案1】：

这类事情有一个特定的 jQuery 选择器。

它叫…………等等…………:visible！

当没有发布代码时，很难判断你应该把选择器放在哪里！

编辑：同样，可见选择器可能是要走的路，很难说具体如何实现它，但如果根据添加到输入元素的类完成验证，你可以删除这些类，我在示例中使用与可见相反的内容，如下所示：

$("form:hidden").removeClass();

这将删除所有隐藏的表单元素上的所有类，因此它们不会被验证。

如果这些稍后会再次可见，您将需要保留这些类并在可见时重新应用它们，我在想这样的事情：

$("form:hidden").toggleClass();

将切换所有类。确实就是这么简单，尽管这当然需要更多的工作才能使您的表单正常工作，并且您可能应该编写一些东西来更新由于原始类再次发生在表单中的更改而变得可见的元素。

小提琴：http://jsfiddle.net/yW73h/8/

【讨论】：

他想要选择的所有内容都已发布 XD。 docs.jquery.com/Plugins/Validation 和 :visible 是他的问题的许多所需解决方案中最简单的一个。
也和他一起使用插件 :visible 对他一点帮助都没有……他将整个表单发送给插件。

【解决方案2】：

如果您正在使用插件，您可以将 onsubmit 设置为 false：

 $("form").validate({ 
     onsubmit: false, 
     errorPlacement: function (error, element) { },            
     showErrors: function(errorMap, errorList) {                         
        $.each(errorList, function() { 
            errorSummary += " * " + this.message + "\n"; 
        });        
        this.defaultShowErrors(); 
          }, 
     errorClass: "Alert" 
    });

然后你可以为你想要触发验证的元素添加类：

 $('.modalValidationGroup .causesValidation').click(function (evt) { 
        errorSummary = "You have the following errors: \n";            
        clearDataTable(); 
        setValidateRules(); 
        var $group = $(this).parents('.modalValidationGroup'); 
        var isValid = true; 
        $group.find(':input').each(function (i, item) { 
            if (!$(item).valid()) 
                isValid = false; 
        });

        if (!isValid) { 
            evt.preventDefault(); 
            alert(errorSummary); 
        } else { 
            //submit form            } 
 });

【讨论】：

【解决方案3】：

这很简单，您应该在他们的网站上阅读 jquery 的文档。这将属于选择器。您需要使用的选择器是

//1. attribute=value
$('[attributeName=value]')
//2. has attribute
$('[attribute]')
//3. mulitple selotors
$('[attributeName], [attributeName=value]')
//4. visible
$('Sector:visible')

所以选择一个例子是

$('#formID input[minlength]:visible, #formID input[class=required]:visible');

我猜选择器会变得又长又慢。也知道选择器我毫无意义，因为您使用需要表单的插件。所以如果你想要这个功能，你必须改变插件......很多！所以找一个插件来做这个，写你自己的，或者改变你的形式。这是插件少见的缺点。有时他们只是不做你需要的。

【讨论】：