Jquery 帖子和不显眼的 ajax 验证不起作用 mvc 4

问题描述

在 jquery 回发上，如果模型状态无效，我想使用 jquery 非侵入式验证显示验证错误消息.我创建了一个示例应用程序.应用中的viewmodel如下

On the jquery postback if the model state is invalid I want to show the validation error messages using jquery unobtrusive validation. I have created a sample application. The viewmodel in the application is as below

 public class CityModel
{
    public int Id { get; set; }

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

并且控制器有以下动作方法

and the controller has the following action methods

 public ActionResult City()
    {
        var cities = GetCities();

        return View(cities);
    }

    [HttpPost]
    public ActionResult SaveCity(CityModel cityModel)
    {
        if (ModelState.IsValid)
        {
            //Save City
            return null;
        }
        else
        {
            return View();
        }
    }

public List<CityModel> GetCities()
    {
        var citiesList = new List<CityModel>
        {
            new CityModel() {Id = 1, City = "London"},
            new CityModel() {Id = 2, City = "New York"}
        };
        return citiesList;
    }

视图有以下标记

@model List<CityModel>
<h2>Cities</h2>

@Html.ValidationSummary(true)
@using (@Html.BeginForm(null, null, FormMethod.Post, new { id = "frmSite", name = "frmSite" }))
{
@Html.EditorForModel()

<input type="submit" name="Sumbit" onclick=" SaveCity(); return false; " />
}

<script>
function SaveCity() {
    $.ajax({
        type: "POST",
        url: "/Home/SaveCity",
        contentType: "application/html; charset=utf-8",
        data: {
            Id: $('.cityId').val(),
            City: $('.cityName').val()
        },
        success: function (data) {
        }

    });
}
 </script>

编辑器模板看起来像

@model CityModel
<table class="table">
    <tr>
        <td>
            @Html.TextBoxFor(x => x.Id, new {@class = "cityId"})
        </td>
    </tr>
    <tr>
        <td>
            @Html.TextBoxFor(x => x.City, null, new {@class = "cityName"})
            @Html.ValidationMessageFor(x => x.City)
        </td>
    </tr>
</table>

我已经检查了 </script><script src="/Scripts/jquery.validate.js"></script><script src="/Scripts/jquery.validate.unobtrusive.js"></script> 包含在页面中并且 存在于 web 配置文件中

I have checked the <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> are included in the page and <add key="UnobtrusiveJavaScriptEnabled" value="true" /> is present in the web config file

推荐答案

您正在通过 ajax 调用您的帖子，因此您需要手动调用 $form.validate(); 并测试结果$form.valid():

You are calling your post via ajax so you will need to manually call $form.validate(); and test the result with $form.valid():

function SaveCity() {

    $.validator.unobtrusive.parse($form);
        $form.validate();
        if ($form.valid()) {

        $.ajax({
            type: "POST",
            url: "/Home/SaveCity",
            contentType:"application/json; charset=utf-8",
            data: {
            Id: $('.cityId').val(),
            City: $('.cityName').val()
            },
            success: function (data) {
            }

        });

    }
}

如果它纯粹是客户端，错误将包含在 jquery 验证对象 $form.validate().errorList 中，但您将不得不进行一些类似于我提到的手动处理下面.

If it is purely client-side, the errors will be contained within the jquery validation object $form.validate().errorList but you will have to do some manual processing similar to what I mention below.

如果您希望返回服务器端模型状态，您可以将模型状态错误作为键值对添加到控制器中，并将它们作为 json 返回.

If you wish to return server-side model state you can add the model state errors as a key value pair in your controller and return them as json.

您可以使用以下方法来显示消息.

You can use the below method to display the messages.

这会找到所有带有模型状态错误键的验证消息，并向它们添加红色错误消息.请注意，您可能希望对此进行调整以针对某个键显示许多错误消息.

This finds all the validation message spans with model state error keys and adds the red error message to them. Please note you may want to adapt this to display many error messages against a key.

public doValidation(e)
{
        if (e.data != null) {
            $.each(e.data, function (key, value) {
                $errorSpan = $("span[data-valmsg-for='" + key + "']");
                $errorSpan.html("<span style='color:red'>" + value + "</span>");
                $errorSpan.show();
            });
        }
}

更新

这是上面的修改，因此您可以从 jquery 不显眼的错误中手动解析它:

Here is the above adapted so you can parse it manually from the jquery unobtrusive errors instead:

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

只需在 else 语句中弹出它，您就可以开始了.:)

Just pop that in an else statement and you are good to go. :)

这篇关于Jquery 帖子和不显眼的 ajax 验证不起作用 mvc 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！