ajax form
1.0.0
Formulaires HTML sur les médicaments améliorant la performance.
Remarque : le formulaire Ajax n'est pas lié à Polymer. En fait, il n'a aucune dépendance, mais devrait fonctionner parfaitement avec Polymer ou toute autre bibliothèque d'éléments personnalisés. Si vous préférez utiliser un simple polyfill d’éléments personnalisés, ajax-form est également votre meilleur choix.
<form> traditionnel ?La soumission du formulaire modifie/recharge la page, et il n'est pas trivial d'empêcher correctement cela.
Vous ne pouvez pas envoyer d'en-têtes personnalisés avec un formulaire soumis.
Vous ne pouvez pas (facilement) analyser la réponse du serveur après l'envoi d'un formulaire.
Le suivi par programme des formulaires/champs invalides est frustrant.
Vous ne pouvez pas envoyer de données de formulaire au format JSON.
Vous n'avez aucune possibilité d'augmenter par programme les données saisies par l'utilisateur avant qu'elles ne soient envoyées au serveur.
Les éléments de formulaire personnalisés (tels que ceux créés à l'aide de la spécification des composants Web) ne peuvent pas être soumis à l'aide d'un <form> traditionnel pur.
L'élément personnalisé ajax-form augmente un <form> traditionnel pour fournir des fonctionnalités supplémentaires et résoudre les problèmes répertoriés ci-dessus. Consultez la page de documentation de l'API pour une documentation complète et des démos.
npm install ajax-form
Utilisez ajax-form comme vous utiliseriez un formulaire traditionnel, à l'exception de l'attribut obligatoire is="ajax-form" que vous devez inclure dans le balisage de votre élément <form> . Étant donné qu'ajax-form est un composant Web, vous devrez peut-être inclure un polyfill de composant Web, tel que webcomponents.js pour garantir que les navigateurs qui n'implémentent pas la spécification WC peuvent utiliser ajax-form. Le formulaire Ajax n'a pas de dépendances matérielles.
Une utilisation très simple de ajax-form ressemble à un <form> normal, avec l'ajout d'un attribut is :
<form is="ajax-form" action="my/form/handler" method="post"><label>Entrez votre nom : <input type="text" name="full_name"></label>.. .</form>
Consultez la page de documentation de l'API pour une documentation complète et des démos.
Développez-vous un composant Web de champ de formulaire ? Lisez les instructions ci-dessous pour vous assurer que votre champ s'intègre correctement à ajax-form.
Votre composant s'intégrera bien dans le formulaire ajax à condition que votre élément personnalisé expose une propriété value qui contient la valeur actuelle du champ. Si ce n'est pas le cas, votre champ personnalisé doit garantir qu'un champ de formulaire HTML natif fait partie du DOM léger. Dans les deux cas, l'élément avec la propriété value doit également contenir un attribut name . Votre utilisateur/intégrateur devra inclure une valeur appropriée pour ce champ.
Si votre champ personnalisé expose un champ de formulaire HTML natif dans le DOM léger, alors il n'y a plus rien à faire - ajax-form respectera toute validation que votre utilisateur/intégrateur ajoute au champ. Le ou les attributs de contrainte DOIVENT être placés sur le champ du formulaire HTML natif.
Si votre champ personnalisé n'expose PAS par défaut un champ de formulaire HTML natif dans le DOM léger et que vous souhaitez qu'ajax-form respecte les contraintes de validation, vous devrez alors inclure un peu de code pour en tenir compte. Voici les étapes à suivre :
Ajoutez un champ <input type="text"> opaque, 0x0 au DOM clair, juste avant votre champ.
Ajoutez une propriété customElementRef à l'entrée, avec une valeur égale à votre champ.
Assurez-vous que la validité de la saisie correspond toujours à la validité de votre champ. Vous pouvez le faire via la méthode setCustomValidity présente sur un HTMLInputElement .
Consultez la méthode setValidationTarget dans le code source de l’élément personnalisé <file-input> pour un exemple.
npm install npm install -g grunt-cli grunt
L'exécution grunt sans aucun paramètre sera testée sur quelques navigateurs installés localement (voir la base de code pour plus de détails).
L'exécution de grunt shell:wctSauce exécutera des tests sur un certain nombre de navigateurs dans SauceLabs. Assurez-vous d'abord que votre nom d'utilisateur et votre clé SauceLabs sont attachés aux variables d'environnement appropriées.
