jQuery вкладки и подтверждение

Question

Я использую вкладки jQuery и проверяю, что все поля заполнены до того, как пользователь переместится на следующую вкладку. На некоторых вкладках есть опции, в которых пользователь может выбирать из нескольких параметров, и иногда пользователь щелкает опцией 1 и означает вариант 2, но когда они пробуют и нажимают предыдущую кнопку, это проверяет поля и не позволит им пока они не заполнили все поля, которые являются мусором UX.

Я хотел был бы подтвердить только при нажатии следующей кнопки, но не при нажатии предыдущей кнопки.

<a class="btn nexttab navbutton" href="#step1">Previous</a> 
<a class="btn nexttab navbutton" href="#step3">Next</a> 

Вот код, я использую в настоящее время:

var validator = $("#start").validate(); 

var tabs = $("#tabs").tabs({ 
    select: function(event, ui) { 
     var valid = true; 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 

     $(panelId).find(":input").each(function() { 
      console.log(valid); 
      if (!validator.element(this) && valid) { 
       valid = false; 
      } 
     }); 

     return valid; 
    } 
}); 

Чтобы попытаться преодолеть это я добавил класс с именем следующей кнопки на следующие кнопки только затем пытался изменить эту линию, я предполагаю, проверяет любой вход:

$(panelId).find(":input").each(function() { 

к:

$(".nextbutton").click(function() { 

, но он позволяет пользователю перейти к следующему экрану, не заполняя все поля.

Как я могу это сделать, так что только движение вперед проверено?

http://jsfiddle.net/553xmzh3/1/

Answer 1

Я хотел бы проверить только по нажатию на следующую кнопку, но не на нажатия предыдущей кнопки. .... Как я могу это сделать, так только подтверждение движения вперед?

Просто введите cancel класс на свою «предыдущую» кнопку. Все правила проверки будут автоматически проигнорированы, если кнопка отправки содержит класс cancel. Однако, submitHandler будет стрелять, как если бы форма была действительной.

<input type="submit" value="PREVIOUS" class="cancel" /><!--// This submit will not trigger validation //--> 

<input type="submit" value="NEXT" /><!--// This submit will trigger validation //--> 

Работа DEMO: http://jsfiddle.net/4zdL8ha3/

---

EDIT:

Хотя он все еще работает, using class="cancel" has been officially deprecated and replaced with formnovalidate="formnovalidate"

<input type="submit" value="PREVIOUS" formnovalidate="formnovalidate" /> 

Рабочая DEMO: http://jsfiddle.net/4zdL8ha3/1/

---

Поскольку вы используете анкерные тег вместо type="submit" элементов, это решение не будет работать для вас. Лучше всего заменить ваши якорные метки на элемент button. Таким образом, используя CSS, вы можете создать стиль button, чтобы он выглядел точно так же, как якорь.

<button type="submit" class="btn nexttab navbutton" formnovalidate="formnovalidate">Previous</button> 
<button type="submit" class="btn nexttab navbutton">Next</button> 

Работа DEMO: http://jsfiddle.net/4zdL8ha3/2/

---

EDIT:

Если вы должны иметь якорь метки вместо type="submit" кнопок, то вам необходимо написать соответствующие обработчики кликов и проверьте действительность формы только на «последующих» обработчиках кнопок. Использование метода .valid() также упрощает ваш код на , удаляя ваш пользовательский тестер проверки из функции переключателя вкладок.

$(".nexttab").click(function() { // NEXT BUTTON 
    if ($("#start").valid()) { // TEST VALIDATION 
     $("#tabs").tabs("select", this.hash); 
    } 
}); 

$(".cancel").click(function() { // PREVIOUS BUTTON - NO VALIDATION TEST 
    $("#tabs").tabs("select", this.hash); 
}); 

: Инициализация

var validator = $("#start").validate(); 

var tabs = $("#tabs").tabs({ 
    select: function (event, ui) { 
     var current = $(this).tabs("option", "selected"); 
     var panelId = $("#tabs ul a").eq(current).attr("href"); 
     return true; 
    } 
}); 

DEMO: http://jsfiddle.net/553xmzh3/3/