Étiquette : button

[jQuery] Bloquer, jusqu’à sa validation, l’événement Submit dans un formulaire contenant plusieurs boutons

Un formulaire est susceptible de contenir plusieurs boutons, par exemple dans le cas d’un formulaire sur plusieurs étapes avec un bouton prev, un bouton next pour naviguer d’une étape à l’autre et un bouton submit pour soumettre le formulaire.

Si on passe par une validation des champs étape par étape (les champs doivent être correctement renseignés sur une étape donnée avant de pouvoir passer à la suivante) et qu’on utilise (par exemple), le plug-in Abide de Foundation 6 for sites, la présence de l’attribut type="submit"> est obligatoire sur les boutons prev et next pour valider les champs saisis à l’étape en cours avant de pouvoir accéder à la suivante.

Problème: cette présence obligatoire de l’attribut type="submit"> sur les boutons prev et next a pour fâcheux résultat de soumettre le formulaire au clic sur ces derniers.

Solution: intercepter l’événement submit avec la méthode .bind().

Ce code aura pour effet d’annuler la soumission du formulaire sur tous les boutons de celui-ci. Ce n’est pas tout-à-fait ce que l’on souhaite puisqu’arrivé à la fin de notre formulaire, il faut pouvoir soumettre les données.

Pour ce faire, on va commencer par masquer le vrai bouton de soumission :

On va ensuite créer un faux bouton à l’aide d’un élément a (qui ne pourra rien soumettre) :

Puis, au moment ou on souhaite laisser la possibilité à l’utilisateur de soumettre, on lance au clic sur notre faux bouton un .unbind() de l’événement submit et et un trigger-click sur le vrai bouton de soumission (qui reste toujours masqué) :

L’intérêt de cette solution réside dans le fait qu’on continue d’empêcher les boutons prev et next d’envoyer le formulaire, ce qui se produirait à la dernière étape si on unbindait l’événement submit sur l’ensemble des boutons et que l’utilisateur décidait, au lieu de soumettre, de repasser à l’étape précédente.

[Bootstrap] Changer l’aspect (couleurs de fond, de texte et de bordure) d’un bouton dropdown lorsqu’on clique sur tout autre élément dans la page.

Les Buttons dropdowns dans la doc officielle de Bootstrap : http://getbootstrap.com/components/#btn-dropdowns.

Structure HTML; notez bien les emplacements des classes .open et .dropdown-toggle :

Problème :

pbm-btn-dropdown

Le navigateur ne tient pas compte de mes surcharges CSS. Ce sont les styles standards de .btn-default qui prennent le pas sur la ré-écriture.

Remarque : le code ci-dessous utilise le caractère & comme alias de la classe .btn-default. Il s’agit d’une version LESS des styles Bootstrap.

Solution :

Le code CSS fourni avec Bootstrap est erroné : en regard du markup HTML énoncé plus haut, la classe .open n’existe pas dans la chaîne .open > .dropdown-toggle& (ou .open > .dropdown-toggle.btn-default). Le chemin correct serait &.dropdown-toggle.

[CSS] Créer des boutons avec des flèches en CSS3 sans markup supplémentaire avec la propriété border et la pseudo-classe :after

Générateur de flèches en CSS3.
Simulation : http://jsfiddle.net/frontenddeveloper/caocL8dp/8/, mixin SASS.

css_arrows

[jQuery] Transformer un input type submit en button en conservant l’ensemble de ses attributs