クライアント側の検証MVCアプリケーション

Question

私はepiserver xform を使用してクライアント側のフォーム検証を実行しようとしていますがコンパイルされたHTMLは次のようになりますか？ .validateライブラリの使用について考えていますが、epiを通じてフォームに新しいコントロールを追加すると問題が発生します。

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

それはイベントが発生しますが、DBに私のフォームを保存しない： はまた、私はこのようなものでAJAX呼び出しを使用しようとしました。私が渡したすべてのフィールドが有効であるにもかかわらず、

Answer 1

残念ながら、現在の状態のXFormsは、カスタマイズに関しては非常に扱いにくいことで有名です。カスタムレンダリングおよび/または検証のために、私たちはしばしば独自のレンダリングを完全に実装します。

これを達成する方法については多数の記事がありますが、時間がかかることがあります。 ：/

クライアント側の検証は、デフォルトの生成されたHTMLにイベントハンドラを追加することによってのみ達成できますが、通常はそれで十分ではありません。これはサーバー側のイベントと組み合わせることもできますが、カスタムレンダリングをしないでエンドユーザー向けのXFormsの動作を適切にカスタマイズすることは難しいです。

Answer 2

ここでは、.validate() jsライブラリを使用してフォームの完全なクライアント側検証を含めることにしました。 これを達成する他の方法があると確信していますので、ここに私のバージョンがあります：

EpiServerには、すべてのコントロールに使用できるクラスフィールドがあります。（面白いことに、隠しフィールドはありませんが、ストーリー）。 'requiredField'という名前のCSSクラスを追加し、メール検証の場合は'emailField'、フォームの場合は'halfWidthField'など、さまざまな種類のバリデーションにクラスを追加しました。

。有効にするには、必要な属性を追加する必要があります。それを達成するために、私は既に割り当てられたクラス名に基づいてこれらの属性を追加するための小さなスクリプトを作成しました。 私のJSコードは次のようなものになります。

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

最後に：AJAX呼び出しが発生するため、私は、ビューを変更し、Ajax呼び出しの代わりに、通常のポスト呼び出しを行いました。

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

期待どおりに動作し、必要に応じて検証をカスタマイズできます。 最終的な形は次のようになります。