se concentrer sur le champ requirejs dans les tabs de bootstrap

Après-midi, j’utilise PHP, HTML5 et Bootstrap. J’ai construit un formulaire qui est séparé sur 5 tabs et dans ce formulaire sont plusieurs champs obligatoires. Tous les champs de saisie requirejs sont ‘text’ et sont également marqués avec required = “required” aria-required = “true”.

Lors de la soumission, la validation html5 détecte les erreurs si elles se trouvent sur l’onglet en cours. Toutefois, j’aimerais utiliser un peu de jQuery pour se concentrer sur le champ d’onglet et de saisie correct qui n’a pas été renseigné et pour afficher un message d’alerte. Je ne suis pas sûr que cela soit possible ..

Soit ça, s’il est plus facile de vérifier que les tabs sont obligatoires, les champs changent.

Il n’y a qu’un seul formulaire sur la page.

Merci beaucoup

** Modifier ** Après avoir bricolé, j’ai créé une fonction d’alerte pour les champs obligatoires, mais cela ne modifiera pas l’onglet pour qu’il se concentre sur le champ requirejs. ‘productbutton’ est l’identifiant de mon bouton d’envoi pour tout le formulaire. ‘product_form’ est l’identifiant de mon formulaire.

$('#productbutton').click(function(){ var error = 0; var msg = 'An Error Has Occured.\n\nRequired Fields missed are :\n'; $(':input[required]', '#product_form').each(function(){ $(this).css('border','2px solid green'); if($(this).val() == ''){ msg += '\n' + $(this).attr('id') + ' Is A Required Field..'; $(this).css('border','2px solid red'); if(error == 0){ $(this).focus(); } error = 1; } }); if(error == 1) { alert(msg); return false; } else { return true; } });

Fondamentalement, si erreur = 1, un message d’erreur contenant l’ID d’entrée manquant sera affiché. il échoue ensuite à soumettre le formulaire avec un retour faux. Il se concentre sur le champ oublié et place une bordure rouge autour du champ. Mais cela ne se concentre pas sur l’onglet .. Sinon, le formulaire sera envoyé.

Je voudrais le même problème et je le résous de cette façon:

Lorsque vous cliquez sur le bouton Soumettre (vous devez l’identifier), il recherche les champs de saisie non valides, récupère l’ID du .tab-pane le plus proche et l’affiche.

J’espère que vous aidez!

Après un peu plus de jeu, je trouve une réponse de travail ..

 if(error == 0){ $(this).focus(); var tab = $(this).closest('.tab-pane').attr('id'); $('#myTab a[href="#' + tab + '"]').tab('show'); }

Je viens de remplacer les 2 lignes supplémentaires ci-dessus dans mon code ci-dessus et il affiche maintenant automatiquement le bon onglet. Ce qui est fait, c’est trouver l’id le plus proche du champ obligatoire en utilisant le $ (this) .closest (‘. Tab-pane’). Attr (‘id’);

En utilisant le code sur bootstrap, j’applique simplement la fonction .tab (“show”) à cet onglet.

J’ai trouvé une solution la plus simple. Cela pourrait aider;)

 $('#productbutton').click(function () { $(':required:invalid', '#product_form').each(function () { var id = $('.tab-pane').find(':required:invalid').closest('.tab-pane').attr('id'); $('.nav a[href="#' + id + '"]').tab('show'); }); });