提交无效表单时不显示验证消息（ASP.NET Umbraco）答案

【问题标题】：Validation Message not displaying when submitting non-valid form (ASP.NET Umbraco)提交无效表单时不显示验证消息（ASP.NET Umbraco）
【发布时间】：2017-08-29 13:10:10
【问题描述】：

我按照本指南中有关如何在 Umbraco 中创建功能表单的所有步骤进行操作。 https://our.umbraco.org/documentation/getting-started/Code/Creating-Forms/

然后我继续添加一些额外的验证，用 [Required] 和 [EmailAddress] 标记我的模型属性，并为每个输入在我的视图中添加验证消息：

@Html.ValidationMessageFor(m => m.Navn)

我的控制器设置为发送一封电子邮件，其中包含输入字段中输入的数据。目前它不起作用，因为我需要一个 SMTP 客户端：

[HttpPost]
        public ActionResult Submit(ContactFormViewModel model)
        {
            if (!ModelState.IsValid) //validation
                return CurrentUmbracoPage();

            /// Work with form data here
            MailMessage mailMessage = new MailMessage();
            mailMessage.To.Add("thomb@hotmail.dk");
            mailMessage.From = new MailAddress(model.Email);
            mailMessage.Subject = "Kontakt mail";
            mailMessage.Body = "Navn: " + model.Navn + "\nAddresse: " + model.Addresse + ", " + 
                model.PostNrBy + "\nTelefon: " + model.Telefon + "\n\n" + model.Message;
            SmtpClient smtpClient = new SmtpClient("smtp.your-isp.com");
            smtpClient.Send(mailMessage);

            return RedirectToCurrentUmbracoPage();
        }

我的表单视图使用 Umbraco 表单辅助方法：

@using (Html.BeginUmbracoForm("Submit", "ContactForm"))
{
    <div class="col-sm-8">
        <div class="row">
            <div class="col-sm-4">
                <form class="form-inline" id="kontaktForm">
                    <div class="form-group">
                        <label for="">Navn</label>
                        @Html.TextBoxFor(m => m.Navn, new { @class = "form-control", @placeholder = "Indtast navn..." })
                        @Html.ValidationMessageFor(m => m.Navn)
                        <label for="">Addresse</label>
                        @Html.TextBoxFor(m => m.Addresse, new { @class = "form-control", @placeholder = "Indtast addresse..." })
                        <label for="">Postnr. + by</label>
                        @Html.TextBoxFor(m => m.PostNrBy, new { @class = "form-control", @placeholder = "Indtast postnr & by..." })
                        <label for="">Telefon</label>
                        @Html.TextBoxFor(m => m.Telefon, new { @class = "form-control", @placeholder = "Indtast telefonnr..." })
                        <label for="">Email</label>
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "Indtast email..." })
                        @Html.ValidationMessageFor(m => m.Email)
                    </div>
                </form>
            </div>
            <div class="col-sm-8">
                <label for="">Skriv din besked</label>
                @Html.TextAreaFor(m => m.Message, new { @class ="form-control", @id = "kontaktBesked", @rows = "11", @placeholder = "Indtast din besked her..."})
                @Html.ValidationMessageFor(m => m.Message)
                <button class="btn_1 pull-right contact-btn" name="submit" type="submit">Afsend Besked</button>
                <button class="btn_1 contact-btn">Ryd felter</button>
            </div>
        </div>
    </div>
}

但是当我点击提交按钮时，没有显示验证消息并且页面重新加载。我是否缺少验证步骤？

编辑：添加模型

public class ContactFormViewModel
    {
        [Required]
        public string Navn { get; set; }

        public string Addresse { get; set; }
        public string PostNrBy { get; set; }
        public string Telefon { get; set; }

        [EmailAddress]
        public string Email { get; set; }

        [Required]
        public string Message { get; set; }
    }

【问题讨论】：

您是否尝试过在 post 操作中将模型传回？喜欢return CurrentUmbracoPage(model)。如果你想要一条消息，你必须说出哪条消息：`[Required(ErrorMessage = "Your message")]
CurrentUmbracoPage() 方法遗憾地不接受任何参数。
我会尝试将 ErrorMessage 添加到属性中
这是你应该做的：给CurrentUmbracoPage 和Submit方法提供相同的名字，这样你可以返回视图（模型），但由于你的帖子需要一个参数，所以它们会有所不同.
接收帖子的动作方法。我会在回答中举一个例子，你告诉我它是否有效

标签： c# asp.net forms validation umbraco

【解决方案1】：

如果您检查 ModelState.IsValid 并返回 currentumbracopage()，它应该会显示错误消息。

否则你可以像这样使用 HTML5 原生验证：

@Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "Indtast email...", @type="email" })

或在输入的第一个元素上使用 setCustomValidation 结合使用 JQuery 和 HTML5 验证。

编辑在下面添加了带有 HTML5 验证的 jquery 代码

 $('#v[element id]')[0].setCustomValidity("[validation error message]");

要使其有效，只需将消息设置为“”

 $('#[element id]')[0].setCustomValidity("");

【讨论】：