使用AJAX请求时验证不起作用

时间:2019-01-03 07:52:19

标签: jquery ajax asp.net-mvc jquery-validate unobtrusive-validation

我正在尝试使用ValidationMessageFor验证字段,并且如果您使用Html.Beginform提交表单,一切都可以正常工作,但是如果我使用AJAX查询,则验证将不再起作用。 我的密码 查看:

@model AutoStore.Domain.Core.Client

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>
    html,
    body {
        height: 100%;
    }

    body {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .form-signin {
        width: 100%;
        max-width: 330px;
        padding: 15px;
        margin: auto;
    }

    .input-group-text {
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
    }

    .form-control {
        border-radius: 30px;
    }
</style>

@Html.ActionLink("Главная", "Index")

@using (Html.BeginForm())
{
    <div class="container">
        <div class="form-signin">
            <div class="form-group">
                @Html.LabelFor(i => i.CSurname, "Фамилия")
                <div class="cols-sm-10">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
                        @Html.EditorFor(i => i.CSurname, new { htmlAttributes = new { @id = "txtSurname", @class = "form-control", @placeholder = "Введите фамилию" } })
                    </div>
                    @Html.ValidationMessageFor(i => i.CSurname, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(i => i.CName, "Имя")
                <div class="cols-sm-10">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
                        @Html.EditorFor(i => i.CName, new { htmlAttributes = new { @id = "txtName", @class = "form-control", @placeholder = "Введите имя" } })
                    </div>
                    @Html.ValidationMessageFor(i => i.CName, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(i => i.CPatronymic, "Отчество")
                <div class="cols-sm-10">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa fa-id-badge" aria-hidden="true"></i></span>
                        @Html.EditorFor(i => i.CPatronymic, new { htmlAttributes = new { @id = "txtPatr", @class = "form-control", @placeholder = "Введите отчество" } })
                    </div>
                    @Html.ValidationMessageFor(i => i.CPatronymic, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(i => i.Login, "Логин")
                <div class="cols-sm-10">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                        @Html.EditorFor(i => i.Login, new { htmlAttributes = new { @id = "txtLogin", @class = "form-control", @placeholder = "Введите логин" } })
                    </div>
                    @Html.ValidationMessageFor(i => i.Login, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(i => i.Password, "Пароль")
                <div class="cols-sm-10">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa fa-lock fa" aria-hidden="true"></i></span>
                        @Html.PasswordFor(i => i.Password, new { @id = "txtPass", @class = "form-control", @placeholder = "Введите пароль" })
                    </div>
                    @Html.ValidationMessageFor(i => i.Password, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(i => i.Email, "E-Mail")
                <div class="cols-sm-10">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                        @Html.EditorFor(i => i.Email, new { htmlAttributes = new { @id = "txtMail", @class = "form-control", @placeholder = "Введите e-mail", @type = "email" } })
                    </div>
                    @Html.ValidationMessageFor(i => i.Email, "", new { @class = "text-danger" })
                </div>
            </div>

            <input id="btnAdd" type="submit" class="btn btn-success btn-block" value="Добавить" />
        </div>
    </div>
}

<script type="text/javascript">
$(document).ready(function () {
    $('form').validate({
        submitHandler: function (form) {
            $.ajax({
                type: "POST",
                url: "/Authorization/Registration",
                data: $(form).serialize(),
                success: function (result) {
                    $(location).attr('href', result.URL);
                }
            });
        }
    });
});

控制器:

[HttpPost]
        public ActionResult Registration(Client client)
        {
            if (ModelState.IsValid)
            {
                /*unitOfWork.Clients.Create(client);
                unitOfWork.Save();*/
                var url = new { URL = Url.Content("/Authorization/Index") + "#success" };
                return Json(url);
            }

            return View();
        }

_Layout:

@Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
    @Scripts.Render("~/scripts/jquery.validate.min.js")
    @Scripts.Render("~/scripts/jquery.validate.unobtrusive.min.js")

    <div class="container body-content">
        @RenderBody()
    </div>

使用此选项,验证仅在提交表单后有效。并且在执行Ajax请求之后,它不会将我重定向到我在控制器中收集的地址,而是仅在屏幕上以字符串形式显示此地址。而且,如果不是使用jquery Ajax.Beginform,而是在提交表单后,但在输入字段中输入错误数据后立即进行验证,则验证不起作用。 enter image description here

0 个答案:

没有答案