首页 > 解决方案 > 使用 Ajax 请求验证表单

问题描述

我正在尝试验证输入字段表单。取得了一些成果。我使用 Ajax 请求。模型:

public int Id { get; set; }
        [Required]
        [Display(Name = "Фамилия")]
        public string CSurname { get; set; }
        [Required]
        [Display(Name = "Имя")]
        public string CName { get; set; }
        [Required]
        [Display(Name = "Отчество")]
        public string CPatronymic { get; set; }
        [Required]
        [Display(Name = "Логин")]
        public string Login { get; set; }
        [Required]
        [Display(Name = "Пароль")]
        public string Password { get; set; }
        [Required]
        [Display(Name = "E-meil")]
        public string Email { get; set; }

        public virtual ICollection<Order> Orders { get; set; }

        public Client()
        {
            Orders = new List<Order>();
        }

控制器:

[HttpPost]
        public ActionResult Registration(Client client)
        {
            if (ModelState.IsValid)
            {
                return RedirectToAction("Index");
            }

            return View();
        }

看法:

@using (Ajax.BeginForm("Registration", new AjaxOptions { UpdateTargetId = "results" }))
{
    <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", @id = "mess" })
                </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>
}

脚本也连接到布局。

@Scripts.Render("~/scripts/jquery.validate.min.js")
@Scripts.Render("~/scripts/jquery.validate.unobtrusive.min.js")

有一个电子邮件类型字段。一旦我开始向其中输入数据,如果您不输入@,则立即弹出消息: 在此处输入图像描述

但是,如果我Ajax.Beginform在没有连接的情况下使用

@Scripts.Render("~/scripts/jquery.validate.min.js")
@Scripts.Render("~/scripts/jquery.validate.unobtrusive.min.js")

当您单击添加时,会以不同的样式添加另一条消息。

在此处输入图像描述

该文本包含在:

$('#txtMail')[0].validationMessage

当使用 Ajax 请求相同的消息时,我该如何实现?

标签: c#jqueryajaxasp.net-mvcvalidation

解决方案


推荐阅读