客户端验证使用的XForms - MVC应用程序

我试图用episerver xform 编译HTML执行客户端表单验证看起来是这样的：http://codepen.io/anon/pen/ojGGJw 上的任何指导，如何实现这一目标？我在考虑使用.validate库，但如果我们通过epi向表单添加新的控件，我会遇到问题。此外，我试图使用一个AJAX调用像这样的东西：客户端验证使用的XForms - MVC应用程序

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

它触发事件，但不保存我的形式进入数据库。即使我通过的所有字段都是有效的

来源

2015-10-15 IndieTech Solutions

你怎样对待你的'XFormPostedData'，哪来的什么逻辑？ –

令人遗憾的是，XForms在其当前状态下与定制相关的工作非常麻烦。对于自定义渲染和/或验证，我们通常完全实现我们自己的渲染。

关于如何实现它有很多文章，但它可能是耗时的。：/

客户端验证只能通过将事件处理程序附加到默认生成的HTML来实现，但这通常是不够的。尽管这可以与服务器端事件相结合，但是很难正确定制XForms如何在没有自定义渲染的情况下为最终用户工作。

来源

2015-10-19 08:15:18

下面是我最终做的事情，包括使用.validate() js库的完整客户端验证。我相信还有其他的方式来实现这一目标，所以这里是我的版本：

EpiServer有，您可以使用您的所有控件的类字段（可耻存在的方式没有隐藏字段，但是这是一个不同的故事）。因此，我添加了一个名为'requiredField'的css类，并为不同类型的验证添加了额外的类，例如用于电子邮件验证的'emailField'和用于我的表单的CSS布局的'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); 
       }

它按预期工作，我可以根据需要自定义验证。最终形式看起来是这样的：

来源

2015-10-27 17:17:01

客户端验证使用的XForms - MVC应用程序

回答

相关问题