MVC4验证无效

本文关键字：无效 验证 MVC4 | 更新日期: 2023-09-27 18:00:40

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

我用这篇文章作为参考。

型号

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");
    }

MVC4验证无效

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

1.检查web配置中的应用程序设置

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

如果要运行客户端验证，则两者都应为true。

2.在你的代码中，你似乎没有使用问题中发布的Form标签

必须使用表单标签进行验证

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

请在您的布局页面上查看以下jquery参考

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

希望它能帮助你。

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

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

当您向Action发出Ajax请求时，您的验证将不会反映出来，因为视图不会再次呈现。为了保持一致，您可以返回类似JSON的

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

然后使用JavaScript重新填充。

另一种方法可能是制作自定义帮助程序，它将|向所需操作发出POST请求。此处提供了相同的代码参考。

最后，您可以创建一个HTML按钮并发出POST请求。

只需将您的输入按钮设置为具有以下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进行发布，则必须使用jquery unsobstruct在JavaScript中手动调用validate方法。

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

    // 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标记替换为失败消息。

相关文章：