2010-11-18 114 views
0

我有一个div风格默认为“display:none”,直到前一个字段被填写完毕,并且它包含一个需要选择的下拉列表。如何在使用jquery.validationEngine.js进行验证时忽略隐藏的页面元素?

如果在该div变为可见之前提交页面,验证错误将显示在页面的左半部分。

这当然不是一个功能问题,但我一直在想,是否有一种方法可以让验证引擎忽略隐藏的元素。

到目前为止,我已经尝试过在creator's blog上指出的class =“validate [optional:Special]”:“可选:Special:仅当字段非空时验证*请首先调用可选。它似乎没有按照建议工作。

<div id="container" style="display: none;"> 
    ... 
    <select id="mapLocation" onchange="moveMapToCenter();" class="validate[optional: Special]" /> 
    ... 
</div> 

我使用jquery.validate还试图“忽略”:

$(document).ready(function() { 
    $("#aspnetForm").validationEngine({ 
     ignore: ":hidden" 
     success: false, 
     failure: function() {} 
    }) 
}); 

这可能是我的一个简单的疏忽,我们拭目以待!谢谢。

+0

你怎么“隐藏”你的元素? – lucifurious 2010-11-19 02:36:43

+0

从http://stackoverflow.com/questions/2623514/jquery-validate-ignore-elements-with-style:“元素可以被认为隐藏的原因有几个: 它们的显示值为无。 它们是表单元素与类型=“隐藏” 它们的宽度和高度显式设置为0. 祖先元素被隐藏,因此该元素不会显示在页面上 – 2010-11-19 14:07:50

+0

如果您实际上在技术上意味着“如何”我隐藏它们 - 一旦邮政编码字段被填写和验证,我将显示具有“display:inherit;”的元素 – 2010-11-19 14:10:00

回答

1

我最终解决了这个问题,通过隐藏和显示元素的函数添加和删除验证[必需]类属性。

function showContainer() { 
    ... 
    $("#mapLocation").addClass("validate[required]"); 
    ... 
} 
function hideContainer() { 
    ... 
    $("#mapLocation").removeClass("validate[required]"); 
} 

这很有效地避免了在隐藏需要验证的页面元素时出现在奇怪位置的验证错误消息。

0

我需要禁用临时更多的领域,我做这个,一个漂亮的解决方案: 一点jQuery的扩展:

jQuery.extend(jQuery.fn, { 
    switchValidationEngine: function (enable) { 
     $.each(this, function (i, n) { 
      var field = $(n); 
      var rulesParsing = field.attr("class"); 
      var newVal = enable ? rulesParsing.replace(/validate_not\[/g, "validate[") : rulesParsing.replace(/validate\[/g, "validate_not["); 
      field.attr("class", newVal); 
     }); 
    } 
}); 

使用禁用场验证:

$(“#txtModel “).switchValidationEngine(假);

使用重新启用字段有效性:

$( “#txtModel”)switchValidationEngine(真);