Clientseitige Validierung mit Xforms - MVC-Anwendung
Ich versuche eine clientseitige Formularvalidierung mit episerver xform durchzuführen
Das kompilierte HTML sieht so aus: Ссылка
Irgendeine Anleitung, wie man das erreicht?
Ich denke darüber nach, die .validate-Bibliothek zu verwenden, aber ich werde ein Problem haben, wenn wir dem Formular über epi ein neues Steuerelement hinzufügen.
Außerdem habe ich versucht, einen AJAX-Anruf mit etwas wie diesem zu verwenden:
Er löst das Ereignis aus, speichert aber mein Formular nicht in der DB. obwohl alle von mir übergebenen Felder gültig sind
2 Antworten
Bedauerlicherweise ist XForms in seinem aktuellen Zustand notorisch schwerfällig, wenn es um die Anpassung geht. Für das benutzerdefinierte Rendering und / oder die Validierung implementieren wir oft unser eigenes Rendering vollständig.
Es gibt zahlreiche Artikel darüber, wie man es erreichen kann, aber es kann zeitaufwendig sein. : /
Die clientseitige Validierung kann natürlich nur erreicht werden, indem Event-Handler an den standardmäßig generierten HTML-Code angehängt werden, aber das ist normalerweise nicht genug. Obwohl dies mit serverseitigen Ereignissen kombiniert werden kann, ist es schwierig, die Funktionsweise von XForms für den Endbenutzer ohne benutzerdefiniertes Rendering anzupassen.
Hier ist, was ich getan habe, um eine vollständige clientseitige Validierung für mein Formular mit .validate() js library einzuschließen.
Ich bin mir sicher, dass es andere Wege gibt, das zu erreichen, also hier ist meine Version:
EpiServer hat ein Klassenfeld, das Sie für alle Ihre Steuerelemente verwenden können (schändlicherweise gibt es kein verstecktes Feld, aber das ist eine andere Geschichte).
Also habe ich eine CSS-Klasse namens 'requiredField' hinzugefügt und zusätzliche Klassen für verschiedene Arten von Validierungen hinzugefügt, wie zum Beispiel 'emailField' für die Validierung von E-Mails und 'halfWidthField' für CSS-Layout-Zwecke für mein Formular.
Um zu arbeiten, muss ich die notwendigen Attribute hinzufügen. Um dies zu erreichen, habe ich ein kleines Skript erstellt, um diese Attribute basierend auf den Klassennamen, die ich bereits zugewiesen habe, hinzuzufügen. Mein JS-Code sieht ungefähr so aus:
%Vor%Schließlich: Damit der Ajax-Aufruf stattfinden kann, habe ich die Ansicht geändert und statt eines normalen Postaufrufs einen Ajax-Aufruf durchgeführt.
%Vor%Es funktioniert wie erwartet und ich kann die Validierung nach Bedarf anpassen. Das endgültige Formular sieht ungefähr so aus:
Tags und Links client-side-validation episerver