stronie klienta potwierdzenia przy użyciu xforms - aplikacji MVC

Question

Próbuję wykonać walidację formularza po stronie klienta przy użyciu episerver xform skompilowany html wygląda następująco: http://codepen.io/anon/pen/ojGGJw Wszelkie wskazówki, w jaki sposób to osiągnąć? Myślę o używaniu biblioteki .validate, ale będę miał problem, jeśli dodamy nową kontrolę do formularza przez epi. Również próbowałem użyć wywołanie AJAX coś takiego:

$.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'); 
     } 
    }); 

pożary zdarzenie, ale nie uratować moją postać w DB. mimo że wszystkie pola, które przeszedłem, są ważne

Answer 1

Niestety, XForms w swoim obecnym stanie jest notorycznie kłopotliwy w obsłudze, jeśli chodzi o personalizację. W przypadku niestandardowego renderowania i/lub sprawdzania poprawności często implementujemy nasze własne renderowanie całkowicie.

Istnieje wiele artykułów o tym, jak to osiągnąć, ale może to być czasochłonne. :/

Sprawdzanie poprawności po stronie klienta można oczywiście osiągnąć jedynie poprzez dołączenie procedur obsługi zdarzeń do domyślnie wygenerowanego kodu HTML, ale zwykle to za mało. Chociaż może to łączyć się ze zdarzeniami po stronie serwera, trudno jest właściwie dostosować sposób działania XForms dla użytkownika końcowego bez niestandardowego renderowania.

Answer 2

Oto, co w końcu robiłem, aby dołączyć pełną weryfikację po stronie klienta dla mojego formularza przy użyciu biblioteki JS .validate(). Jestem pewien, że istnieją inne sposoby, aby to osiągnąć, więc oto moja wersja:

EpiServer ma pole klasy, które można wykorzystać do wszystkich kontrolek (niestety nie ma ukrytego pola przy okazji, ale to jest inne fabuła). Dodałem więc klasę css o nazwie 'requiredField' i dodano dodatkowe klasy dla różnych typów sprawdzania poprawności, takich jak sprawdzanie poprawności poczty e-mail i 'emailField' i 'halfWidthField' dla celów układu CSS dla mojego formularza.

Aby .Validate do pracy, muszę dodać niezbędne atrybuty. Aby to osiągnąć, stworzyłem mały skrypt, aby dodać te atrybuty w oparciu o nazwy klas, które już przypisałem. mój kod JS wygląda mniej więcej tak:

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

wreszcie: za wywołanie ajax się stało, że zmienił pogląd i wykonane połączenia Ajax zamiast zwykłego połączenia pocztowego.

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

Działa zgodnie z oczekiwaniami i mogę dostosować walidację w razie potrzeby. Ostateczna forma wygląda mniej więcej tak: