Onglets de l’interface utilisateur Jquery: tabs avancés avec les boutons Suivant / Précédent en fonction des valeurs des champs de saisie

J’utilise des tabs d’interface utilisateur Jquery qui ne sont utilisés qu’avec les boutons précédent et suivant. Dans mon premier onglet, j’ai des cases à cocher et pour avancer, vous devez choisir une option dans la case à cocher. Mon problème se trouve dans l’onglet 2. J’ai trois champs de saisie que j’aimerais que l’utilisateur remplisse avant d’aller plus loin.

Comment puis-je désactiver le bouton Suivant afin que l’utilisateur soit obligé de remplir les champs de saisie avant de passer à l’onglet suivant? EXEMPLE

JS- NEXT / PREVIOUS

 $(function() { var $tabs = $('#tabs').tabs({ disabled: [0, 1] }); $(".ui-tabs-panel").each(function(i) { var totalSize = $(".ui-tabs-panel").size() - 1; if (i != totalSize) { next = i + 2; $(this).append("Next Page »"); } if (i != 0) { prev = i; $(this).append("« Prev Page"); } }); $('.next-tab, .prev-tab').click(function() { var tabIndex = $(this).attr("rel"); if ( /*(1)*/ $('#tabs').tabs('option', 'selected') > 0 || /*(2)*/ ($('.update.last').length > 0 && parseInt($('.update.last').val(), 10) > 0) ) { $tabs.tabs('enable', tabIndex) .tabs('select', tabIndex) .tabs("option","disabled", [0, 1]); } return false; }); });

HTML

   Title: * <input type="text" id="title" name="title" class="" size="33" autocomplete="off" value=""/>
  Price: * <input type="text" name="price" class="" size="8" maxlength="9" id="price" autocomplete="off" value="" />
  Description: *

Ne modifiez l’onglet du bouton suivant ou précédent que si

(A) le bouton prev a été cliqué ou
(B) onglet en cours est le premier, un dernier choix existe et une option est choisie ou
L’onglet actuel (C) est le deuxième et toutes les valeurs textuelles ( ajustées ) ne sont pas vides.

Voici la prochaine extension non testée:

 $('.next-tab, .prev-tab').click(function() { var tabIndex = $(this).attr("rel"); if ( $(this).hasClass('prev-tab') || /*(A)*/ ( $('#tabs').tabs('option', 'selected') == 0 && /*(B)*/ $('.update.last').length > 0 && parseInt($('.update.last').val(), 10) > 0 ) || ( $('#tabs').tabs('option', 'selected') == 1 && /*(C)*/ $.sortingm($('#title').val()).length > 0 && $.sortingm($('#price').val()).length > 0 && $.sortingm($('#description').val()).length > 0 ) ) { $tabs.tabs('enable', tabIndex) .tabs('select', tabIndex) .tabs("option","disabled", [0, 1]); } return false; });

=== UPDATE ===

Ajout d’une alerte d’onglet spécifique:

 $('.next-tab, .prev-tab').click(function() { var prev = $(this).hasClass('prev-tab'); var currentTab = $('#tabs').tabs('option', 'selected'); if ( prev || /*(A)*/ ( currentTab == 0 && /*(B)*/ $('.update.last').length > 0 && parseInt($('.update.last').val(), 10) > 0 ) || ( currentTab == 1 && /*(C)*/ $.sortingm($('#title').val()).length > 0 && $.sortingm($('#price').val()).length > 0 && $.sortingm($('#description').val()).length > 0 ) ) { var tabIndex = $(this).attr("rel"); $tabs.tabs('enable', tabIndex) .tabs('select', tabIndex) .tabs("option","disabled", [0, 1]); } else if (!prev) { switch (currentTab) { case 0: alert('Please choose an option.'); break; case 1: case 2: alert('Please fill out all form inputs.'); break; } } return false; });

Modifiez le gestionnaire d’événements click:

 $('.next-tab, .prev-tab').click(function() { var $t = $(this), tabIndex = $t.attr("rel"); if ($t.hasClass("prev-tab")) { if ($("input").filter('[value=""]').length) { alert("Please fill out all form inputs."); return false; } } ...

J’espère que cela pourra aider.

Vous pouvez écrire une fonction de validation qui examine l’onglet sélectionné, puis les éléments à renseigner pour que l’option suivante soit activée. Cette fonction peut ensuite être liée à la modification de chacun des éléments à renseigner.