Question

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

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

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

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

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

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

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

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

Answer 1

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

它被称为............等待它............ :visible！

如果没有发布代码，你应该把选择器放在哪里很难分辨！

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

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

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

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

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

将切换所有类。它真的很简单，虽然这需要更多的工作来使用你的形式当然，你应该写一些东西来更新由于原始类中的表单中发生的变化而变得可见的元素。

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

Answer 2

这很简单，你应该在他们的网站上阅读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');

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

Answer 3

如果您使用插件，则可以将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            } 
 });

仅使用jQuery类验证可见字段

3 个答案: