2

我有一个使用 jQuery UI 选项卡的 ASP.NET Web 表单页面。在每个选项卡中都有一组输入，包括在选项卡中提交输入的按钮（使用 AJAX 调用，但这与本讨论无关）。

我想将 jquery 验证引擎（https://github.com/posabsolute/jQuery-Validation-Engine）附加到仅包含选项卡内容的输入子集，但是，由于 ASP.NET Web 表单的工作方式，只有一个表单元素，验证引擎必须附加到表单。

有没有一种简单的方法来告诉这个验证引擎在验证调用中包含当前可见的选项卡/元素？

4

2 回答 2

2

编辑响应：

你要找的更容易！！！如果您只是想验证用户当前所在选项卡上的字段而不限制他们转到其他选项卡，那么在激活我提供的部分代码之前忽略选项卡，并初始化您的 jQuery 验证引擎以忽略验证不可见字段是所有非活动标签的内容。您的代码如下所示：

jQuery("#myForm").validationEngine('attach', {
    promptPosition: "bottomLeft",
    validationEventTrigger: "submit",
    validateNonVisibleFields: false // this does the trick!
});

这是用于说明示例的新 JSFiddle：http: //jsfiddle.net/T7daH/

干杯! :-)

-------------------------------------------------- ----- 原始答案 -------------------------------------------------------- ----------

实际上，有一种非常简单的方法可以使用跨越多个选项卡的表单来实现 jQuery 验证引擎，而无需以编程方式触发每个字段或选项卡单击的验证。

如果您有以下跨多个选项卡的表单...

<form id="myForm" action="">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a>

        </li>
        <li><a href="#tabs-2">Tab 2</a>

        </li>
        <li><a href="#tabs-3">Tab 3</a>

        </li>
    </ul>
    <div id="tabs-1">
        <input type="text" id="requiredFiled" name="requiredField" class="validate[required]" />
    </div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

然后你像这样设置表单和选项卡：

jQuery("#myForm").validationEngine('attach', {
    promptPosition: "bottomLeft",
    validationEventTrigger: "submit",
    validateNonVisibleFields: true,
    updatePromptsPosition: true
});

$(function () {
    $("#tabs").tabs({
        beforeActivate: function (event, ui) {
            if (!$("#myForm").validationEngine('validate')) {
                event.preventDefault();
                $('#myForm').validationEngine('hide');
                setTimeout(function () {
                    $("#myForm").validationEngine('validate');
                }, 450);
            }
        }
    });
});

结果是如果用户当前所在的选项卡不完全有效，则用户无法选择另一个选项卡。这是 JSFiddle 演示：http: //jsfiddle.net/g9yLL/36/

干杯! :-)

于 2014-02-11T16:37:18.493 回答
0

我有一个带有多标签表单的网站，并使用以下方法解决了它：

$(document).ready(function(){}
$('#tab1').click(function(){
// #tab1  name of the tab / a href link inside that tab 

   var field1 = $("#field1").validationEngine('validate');
   var field2 = $("#field2").validationEngine('validate');  

  if(field1 || sources )
  { // to show the error messages ;
   return false;
  }     
 });


 $('#tab2').click(function(){
// #tab2  name of the tab / a href link inside that tab 

   var field1 = $("#field1").validationEngine('validate');
   var field2 = $("#field2").validationEngine('validate');  

  if(field1 || field2 )
  { // to show the error messages ;
   return false;
  }     
 });

);

有关更多信息，请查看https://github.com/posabsolute/jQuery-Validation-Engine并在验证标题下搜索字段验证。

于 2013-08-01T07:15:13.173 回答