使用Ajax请求验证表单

时间:2019-01-03 16:05:43

标签: c# jquery ajax asp.net-mvc validation

我正在尝试验证输入字段的表单。取得了一些成果。我使用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")

有一个电子邮件类型字段。 一旦我开始向其中输入数据,如果您不输入@,则消息会立即弹出: enter image description here

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

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

当您单击添加时,с另一种样式的邮件会出现。

enter image description here

此文本包含在:

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

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

0 个答案:

没有答案