Использовать jQuery Validation Engine с вкладками?

Question

У меня есть страница веб-форм ASP.NET, которая использует вкладки пользовательского интерфейса jQuery. В каждой вкладке есть наборы входных данных, в том числе кнопка, которая представляет входные данные на вкладке (с помощью вызова AJAX, но это не относится к этому обсуждению).

Я хочу подключить механизм проверки jquery ( https://github.com/posabsolute/jQuery-Validation-Engine) только к подмножеству входных данных, которые составляют содержимое вкладки, однако из-за способа работы веб-форм ASP.NET, существует только один элемент формы, и механизм проверки должен присоединиться к форме.

Есть ли простой способ сказать этому механизму валидации включить видимые в настоящее время вкладки / элементы в вызов валидации?

Answer 1

Изменить на ответ:

То, что вы ищете, еще проще! Если вы просто хотите проверить поля на вкладке, на которой в данный момент находится пользователь, не ограничивая их переходом на другие вкладки, то игнорируйте вкладки beforeActivate часть предоставленного мною кода и инициализируйте ваш jQuery Validation Engine, чтобы игнорировать проверку невидимых полей, которые это то, что они будут для всех неактивных вкладок. Ваш код будет выглядеть так:

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/

Ура!:-)

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.