Question

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

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

是否有一种简单的方法可以告诉此验证引擎在验证调用中包含当前可见的标签/元素？

Answer 1

编辑回复：

你在寻找什么更容易！如果您只想验证用户当前所在的选项卡上的字段而不限制它们转到其他选项卡，那么在激活我提供的部分代码之前忽略选项卡，并将jQuery验证引擎初始化为忽略验证非可见字段这是所有非活动标签的用途。你的代码看起来像这样：

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

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

干杯！： - ）

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

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

如果您有以下表格，其中包含多个标签...

<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/

干杯！： - ）

Answer 2

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

$(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并在validate标题下搜索字段验证。

将jQuery验证引擎与选项卡一起使用？

2 个答案: