jQuery Form Framework - jFormer. Fancy Sliding Form with jQuery. Jquery Advanced Ajax validation with CAPTCHA - TutorialCadet – Web Developer and Programming Tutorials. jQuery Ketchup Plugin - Documentation. Ketchup is a small (3.4KB minified & gzipped) jQuery Plugin that helps you to validate your forms. Out of the box it has 18 basic validations and a bubble like style. But truly this Plugin wants to be hacked to fit your needs. Easily write your own validations and overwrite/extend the default behaviour. Bubbles are not for everyone... Default Behavior If you like the style of the bubbles and all validations you need are already included you can get this Plugin up and running like so: Your HTML Header Include the default stylesheet (located in . <! Your HTML By default Ketchup checks the data-validate attribute of form fields if it can find matching validations.
Your Javascript Just call ketchup() on your form, voilà. $('#default-behavior').ketchup(); Declare fields to validate in the call In last version Ketchup checked the class attribute for validations... which was not everyones taste because class should be used for defining CSS classes. Validate on different events Included Validations. JLabel - Pré-remplissez vos inputs via leur label avec style. JLabel est un plugin JQuery qui vous permet de pré-remplir vos inputs avec style via le texte de vos balises labels. Avec ce plugin, vos labels apparaissent directement dans les champs auquels ils sont associés. Lorsque l'internaute clique sur un champ, le label s'efface progressivement pour lui permettre d'entrer du texte. Grâce à ce plugin, on comprend directement à quoi correspondent les inputs et quelles informations on doit entrer.
En somme, cela propose une expérience utilisateur accrue. Attention: ce plugin ne pré-rempli pas à proprement parlé vos champs textes, c'est juste un effet qui fait apparaitre vos labels sur vos champs, et non une valeur (value) attribuée par défaut. Si vous validez le formulaire sans rentrer du texte, le champ sera vide ! Code: Côté code, rien de bien compliquer, il faut bien entendu inclure le plugin dans votre page html, puis déclarer quel élément sera soumis au plugin via son id, sa class ou encore son type de champ: 1. Un plugin simple et efficace ! jQuery: Check / uncheck form checkbox and radio.
Gérer les éléments input radio avec jQuery. J’ai eu hier une question sur la manipulation des éléments radio en Javascript. La personne voulait vérifier que pour chacun de ses groupes de radio, au moins un radio était sélectionné. Plusieurs solutions en Javascript “pur” existent sur Internet mais aucune ne semblait simple à appliquer par cette personne. Je propose donc ici quelques snippets jQuery pour exploiter simplement les éléments Radio. Nous partirons donc d’une page incluant la librairie jQuery et le code XHTML suivant : Accéder aux inputs de type radio en jQuery Il existe plusieurs façon d’accéder aux inputs de type radio en jQuery, j’ai réalisé quelques tests afin de définir quelles expressions étaient les plus rapides : Il en ressort que l’expression input[type=radio] est plus rapide que input:radio (mais est-elle autant générique ?)
Le résultat sont très variable lorsque l’on précise un contexte (ici #monForm) et un grand nombre de radio. Récupérer tous les inputs radios appartenant à un même groupe.