MVC4 验证不起作用

Question

我有一个简单的 1 页应用程序来向用户发送电子邮件。我有 3 个字段用于姓名、电子邮件和电话号码。该代码似乎与输入按钮一起使用，验证触发并抛出正确的错误消息。但我更倾向于在我的 UI 中使用锚标记 (ActionLink)。当我单击锚标记（使用 jQuery）时，数据仍然会发布，但验证不会触发。有什么我遗漏的或者有更好的方法吗？

我已使用this 帖子作为参考。

型号

public class Contact
{
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Email is required")]
    public string Email { get; set; }

    [Required(ErrorMessage = "Phone is required")]
    public string PhoneNumber { get; set; }
}

查看

            <div>
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control", placeholder="Name" })
                @Html.ValidationMessageFor(model=>model.Name)
            </div>
            <div>
                @Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder="Email" })
                @Html.ValidationMessageFor(model=>model.Email)
            </div>
            <div>
                @Html.TextBoxFor(model => model.PhoneNumber, new { @class = "form-control", placeholder="Phone" })
                @Html.ValidationMessageFor(model=>model.PhoneNumber)
            </div>
            <div>
                <input type="submit" value="Give me Free Advice" />
                <div class="btn">
                    @Html.ActionLink("I want free advice", "designerhome")
                </div>
            </div>
  <script>
    $(function () {
        $('.btn').click(function (e) {

            $.post("/campaign/designerhome", { Name: $("#Name").val(), Email: $("#Email").val(), PhoneNumber: $("#Phone").val() }, function (result) {
                //do whatever with the response
                if (result.status == true) {
                    alert('Email submitted successfully');
               }
            });//end of post
        });//end of click
    });
</script>

控制器

[HttpPost]
    public ActionResult designerhome(Contact contact)
    {
        if (ModelState.IsValid)
        {
        }
        return View("Advert1");
    }

Answer 1

我们有一些原因导致验证不起作用

1.检查网络配置中的应用设置

    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

如果您想运行客户端验证，两者都应该为真。

2。在您的代码中似乎您没有使用表单标签，因为它发布在问题中

表单标签是必须的验证

3. Jquery 在布局页面上没有正确引用

请在您的布局页面上检查以下 jquery refrence

jquery.unobtrusive*.js
jquery.validate*.js

希望对你有所帮助。

Answer 2

我会强制在您的 click 处理程序中进行验证，因为 jQuery 似乎只为表单的自动提交（而不是您正在执行的手动 post()）这样做：

$('.btn').click(function (e) {
   if ($('#YourFormIdHere').valid()) { // Will force validation
      $.post(...);
   }
});

Answer 3

当您向 Action 发出 Ajax 请求时，您的验证将不会反映，因为视图不会再次呈现。要保持在同一轨道上，您可以返回 JSON，如

return Json(new {Valid = validState,
                Errors = Get Errors FromModel State, 
            });

然后使用 JavaScript 重新填充。

另一种方法可能是制作 custom Helpers，它将 |向所需的 Action 发出 POST 请求。同样的代码参考是 here。

最后你可以做的是创建一个 HTML 按钮并发出一个 POST 请求。

Answer 4

简单地将您的输入按钮设置为看起来像具有以下 CSS 的链接：

input[type=submit] {
    background:none!important;
     border:none; 
     padding:0!important;
     color:#069;
     text-decoration:underline;
     cursor:pointer;
}

<input type="submit" value="Give me Free Advice" />

这将允许所有内置验证按原样工作，除了外观之外对用户没有任何区别。

如果您的要求是使用 ajax 发布，您必须手动调用 JavaScript 中的 validate 方法，jquery 不显眼。

这可以通过以下方式完成：

    // replace the `formId` with the one defined in your view
    var $form = $('#formId');
    $.validator.unobtrusive.parse($form);
    $form.validate();
    if ($form.valid()) {
      // Do post
   }

为了手动提取错误消息，您可以使用：

$.each($form.validate().errorList, function (key, value) {
            $errorSpan = $("span[data-valmsg-for='" + value.element.id + "']");
            $errorSpan.html("<span style='color:red'>" + value.message + "</span>");
            $errorSpan.show();
        });

它将ValidationMessageFor 标记替换为失败消息。