ajax form
1.0.0
HTML-Formulare zu leistungssteigernden Medikamenten.
Hinweis: Ajax-Form ist nicht an Polymer gebunden. Tatsächlich gibt es überhaupt keine Abhängigkeiten, sollte aber problemlos mit Polymer oder einer anderen benutzerdefinierten Elementbibliothek funktionieren. Wenn Sie lieber eine einfache Polyfüllung für benutzerdefinierte Elemente verwenden möchten, ist Ajax-Form ebenfalls die beste Wahl.
<form> ?Durch die Formularübermittlung wird die Seite geändert/neu geladen, und es ist nicht trivial, dies ordnungsgemäß zu verhindern.
Sie können mit einem gesendeten Formular keine benutzerdefinierten Header senden.
Sie können die Serverantwort nach dem Absenden eines Formulars nicht (einfach) analysieren.
Das programmgesteuerte Verfolgen ungültiger Formulare/Felder ist frustrierend.
Sie können Formulardaten nicht als JSON senden.
Sie haben keine Möglichkeit, vom Benutzer eingegebene Daten programmgesteuert zu ergänzen, bevor sie an den Server gesendet werden.
Benutzerdefinierte Formularelemente (z. B. solche, die mit der Webkomponenten-Spezifikation erstellt wurden) können nicht mit einem herkömmlichen, unverfälschten <form> übermittelt werden.
Das benutzerdefinierte Element ajax-form erweitert ein herkömmliches <form> , um zusätzliche Funktionen bereitzustellen und die oben aufgeführten Probleme zu lösen. Eine vollständige Dokumentation und Demos finden Sie auf der API-Dokumentationsseite.
npm install ajax-form
Verwenden Sie ajax-form genauso wie ein herkömmliches Formular, mit Ausnahme des erforderlichen is="ajax-form" -Attributs, das Sie in Ihr <form> -Element-Markup aufnehmen müssen . Da es sich bei Ajax-Form um eine Webkomponente handelt, müssen Sie möglicherweise eine Webkomponenten-Polyfill-Datei wie webcomponents.js einbinden, um sicherzustellen, dass Browser, die die WC-Spezifikation nicht implementieren, Ajax-Form verwenden können. Ajax-Form hat keine harten Abhängigkeiten.
Eine sehr einfache Verwendung von ajax-form sieht genauso aus wie ein normales <form> , mit dem Zusatz eines is Attributs:
<form is="ajax-form" action="my/form/handler" method="post"><label>Geben Sie Ihren Namen ein: <input type="text" name="full_name"></label>. .</form>
Eine vollständige Dokumentation und Demos finden Sie auf der API-Dokumentationsseite.
Entwickeln Sie eine Formularfeld-Webkomponente? Lesen Sie die folgenden Anweisungen, um sicherzustellen, dass Ihr Feld ordnungsgemäß in Ajax-Form integriert wird.
Ihre Komponente lässt sich gut in das Ajax-Formular integrieren, vorausgesetzt, Ihr benutzerdefiniertes Element stellt eine value bereit, die den aktuellen Wert des Felds enthält. Wenn dies nicht der Fall ist, muss Ihr benutzerdefiniertes Feld sicherstellen, dass ein natives HTML-Formularfeld Teil des Light-DOM ist. In beiden Fällen muss das Element mit der Eigenschaft value auch ein name enthalten. Ihr Benutzer/Integrator muss einen geeigneten Wert für dieses Feld angeben.
Wenn Ihr benutzerdefiniertes Feld ein natives HTML-Formularfeld im Light-DOM bereitstellt, müssen Sie nichts weiter tun – ajax-form respektiert jede Validierung, die Ihr Benutzer/Integrator dem Feld hinzufügt. Die Einschränkungsattribute MÜSSEN im nativen HTML-Formularfeld platziert werden.
Wenn Ihr benutzerdefiniertes Feld standardmäßig KEIN natives HTML-Formularfeld im Light-DOM bereitstellt und Sie möchten, dass Ajax-Form Validierungseinschränkungen berücksichtigt, müssen Sie einen kleinen Code einfügen, um dies zu berücksichtigen. Hier sind die Schritte, die Sie befolgen müssen:
Fügen Sie dem Light-DOM direkt vor Ihrem Feld ein undurchsichtiges 0x0-Feld <input type="text"> hinzu.
Fügen Sie der Eingabe eine Eigenschaft customElementRef hinzu, deren Wert Ihrem Feld entspricht.
Stellen Sie sicher, dass die Gültigkeit der Eingabe immer mit der Gültigkeit Ihres Feldes übereinstimmt. Sie können dies über die setCustomValidity -Methode tun, die in einem HTMLInputElement vorhanden ist.
Ein Beispiel finden Sie in der setValidationTarget -Methode im Quellcode des benutzerdefinierten Elements <file-input> .
npm install npm install -g grunt-cli grunt
Wenn Sie grunt ohne Parameter ausführen, wird mit einigen lokal installierten Browsern getestet (Einzelheiten finden Sie in der Codebasis).
Durch Ausführen von grunt shell:wctSauce werden Tests für eine Reihe von Browsern in SauceLabs ausgeführt. Stellen Sie zunächst sicher, dass Sie Ihren SauceLabs-Benutzernamen und -Schlüssel an die richtigen Umgebungsvariablen angehängt haben.
