Question

我正在尝试使用episerver xform执行客户端表单验证编译后的html如下所示：http://codepen.io/anon/pen/ojGGJw 有关如何实现这一目标的任何指导？我正在考虑使用.validate库，但如果我们通过epi向表单添加新控件，我将遇到问题。此外，我尝试使用类似这样的AJAX调用：

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

它会触发事件，但不会将表单保存到数据库中。即使我通过的所有字段都是有效的

Answer 1

令人遗憾的是，XForms目前的状态在定制方面非常繁琐。对于自定义渲染和/或验证，我们经常完全实现自己的渲染。

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

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

Answer 2

以下是我最终要做的事情，使用.validate() js库为我的表单添加完整的客户端验证。我确信还有其他方法可以实现这一点，所以这是我的版本：

EpiServer有一个可用于所有控件的类字段（可耻的是，顺便说一下，没有隐藏的字段，但这是一个不同的故事）。所以我添加了一个名为'requiredField'的css类，并为不同类型的验证添加了额外的类，例如'emailField'用于电子邮件验证，'halfWidthField'用于我的表单的CSS布局。

为了使.Validate工作，我需要添加必要的属性。为了实现这一点，我创建了一个小脚本，根据我已分配的类名添加这些属性。我的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);
                 }

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

使用Xforms - MVC应用程序进行客户端验证

2 个答案: