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。检查网络配置中的appsettings

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

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

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

中

表单标记必须用于验证

第3。 Jquery未在布局页面上正确引用

请在布局页面上检查以下jquery参考

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

希望它会对你有所帮助。

Answer 2

只需将输入按钮设置为与以下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 unobtrusive手动调用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标记替换为失败消息。

Answer 3

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

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

Answer 4

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

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

然后使用JavaScript重新填充。

另一种方法可能是制作 自定义助手 ，它会向所需的Action.Code引用发出POST请求，同样是here。< / p>

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

MVC4验证不起作用

4 个答案: