Clientside Validierung mit Xforms - MVC-Anwendung

Question

Ich versuche, eine Client-Seite Formular-Validierung führen eine episerver xform die kompilierte HTML verwenden sieht wie folgt aus: http://codepen.io/anon/pen/ojGGJw Alle Hinweise, wie das erreichen? Ich denke über die Verwendung von .validate-Bibliothek, aber ich werde ein Problem haben, wenn wir ein neues Steuerelement über epi dem Formular hinzufügen. Auch habe ich versucht, einen AJAX-Aufruf mit so etwas zu verwenden:

$.ajax({ 
     url: "/industry/XFormPost?XFormId=0643b992-56c6-40a5-91eb-c557443630e0&failedAction=Failed&successAction=Success&contentId=36", 
     data: $(this).serialize(), 
     type: "POST", 
     success: function() { 
      alert('Hello this is a valid form'); 
     } 
    }); 

es das Ereignis ausgelöst wird, aber meine Form in die DB nicht speichern. obwohl alle Felder, die ich passierte, gültig sind

Answer 1

Bedauerlicherweise ist XForms in seinem aktuellen Zustand notorisch umständlich zu arbeiten, 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 erreicht, 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.

Answer 2

Hier ist, was ich getan habe, um eine vollständige clientseitige Validierung für mein Formular mit .validate() js-Bibliothek. Ich bin sicher, es gibt andere Möglichkeiten, das zu erreichen, hier ist meine Version:

EpiServer hat ein Klassenfeld, das Sie für alle Ihre Steuerelemente verwenden können (schändlich gibt es kein verstecktes Feld übrigens, aber das ist ein anderer Geschichte). Also habe ich eine CSS-Klasse mit dem Namen 'requiredField' hinzugefügt und zusätzliche Klassen für verschiedene Arten von Validierungen, wie 'emailField' für die Validierung von E-Mails und 'halfWidthField' für CSS-Layout-Zwecke für mein Formular hinzugefügt.

Um zu arbeiten zu validieren, muss ich notwendige 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. meine JS-Code etwa wie folgt aussieht:

$(".contact-form").find(".requiredfield").each(function() { 
     $(this).prop('required', true); 
    }); 
    $(".contact-form").find(".emailfield").each(function() { 
     $(this).attr('type', 'email'); 
    }); 

zuletzt: für die Ajax-Aufruf passieren, änderte ich die Ansicht und machte einen Anruf Ajax anstelle eines normalen Post Anruf.

@using (Ajax.BeginForm("", "", 
        new AjaxOptions 
        { 
         HttpMethod = "POST", 
         Url = Model.ActionUri 
        } 
        )) 
       { 
        Html.RenderXForm(Model.Form); 
       } 

Es funktioniert wie erwartet und ich kann die Überprüfung anpassen wie benötigt. Die endgültige Form etwa wie folgt aussieht: