Проверка asp.net mvc на стороне клиента не работает?

По какой-то причине проверка на стороне клиента не работает:

Вот мой html:

@using (Html.BeginForm("Create", "Home", FormMethod.Post))
{

<hr />

@Html.ValidationSummary(true)
<hr />

<p>
    <label>Select Client_ID: </label>
    <span class="field">
        <select name="clientId" id="clientId">
            @foreach (var item in Model.ClientId)
            {
                <option value="@item">@item</option>
            }
        </select>
    </span>
</p>

<p>
    <label>@Html.LabelFor(model => model.UserModel.name)</label>
    <span class="field">
        @Html.EditorFor(model => model.UserModel.name)
    </span>
    @Html.ValidationMessageFor(model => model.UserModel.name)

</p>

<p>
    <label>@Html.LabelFor(model => model.UserModel.password)</label>
    <span class="field">
        @*<input name="password" id="password" type="password" />*@
        @Html.EditorFor(model => model.UserModel.password)
    </span>
    @Html.ValidationMessageFor(model => model.UserModel.password)
</p>

<p>
    <label>@Html.LabelFor(model => model.UserModel.email)</label>
    <span class="field">
        @*<input name="email" id="email" type="email" />*@
        @Html.EditorFor(model => model.UserModel.email)
    </span>
    @Html.ValidationMessageFor(model => model.UserModel.email)
</p>

<p>
    <label>Select: </label>
    <span class="field">
        <select name="accessLevel" id="accessLevel">
            <option value="3">Company</option>
            <option value="5">End-User</option>
        </select>
    </span>
</p>

<input type="submit" value="Submit" />

Вот моя модель:

 public class CreateUserModel
{
    [Required]
    [Display(Name = "Client_ID")]
    public string clientId { get; set; }

    [Required(ErrorMessage = "A name is required")]
    [MaxLength(20), MinLength(2, ErrorMessage = "Name must be 2 character or more")]
    [Display(Name = "Name")]
    public string name { get; set; }


    [Display(Name = "Email Address")]
    [Required(ErrorMessage = "Email is Required")]
    [RegularExpression(@"^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}" +
                        @"\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\" +
                        @".)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$",
                        ErrorMessage = "Email is not valid")]
    public string email { get; set; }

    [Required]
    [MaxLength(20), MinLength(6, ErrorMessage = "Password Must be 6 or more chataters long")]
    [Display(Name = "Password")]
    public string password { get; set; }

    [Required]
    public int accessLevel { get; set; }
}

и у меня есть клиентская сторона, включенная в webconfig:

 <appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

{EDIT} добавлен рендеринг html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
<script src="/Scripts/jquery.validate.js"></script>
<div class="jumbotron">
<h1>Add Users to the website</h1>
</div>
<form action="/Home/Create" method="post">    <hr />
<hr />

<p>
    <label for="UserModel_name">Name</label>
    <span class="field">
        <input type="text" name="name" />
    </span>
    <span class="field-validation-valid" data-valmsg-for="UserModel.name" data-valmsg-replace="true"></span>

</p>
<p>
    <label for="UserModel_password">Password</label>
    <span class="field">
        <input name="password" id="password" type="password" />
    </span>
    <span class="field-validation-valid" data-valmsg-for="UserModel.password" data-valmsg-replace="true"></span>
</p>
<p>
    <label for="UserModel_email">Email Address</label>
    <span class="field">
        <input name="email" id="email" type="email" />
    </span>
    <span class="field-validation-valid" data-valmsg-for="UserModel.email" data-valmsg-replace="true"></span>
</p>
<p>
    <label>Select: </label>
    <span class="field">
        <select name="accessLevel" id="accessLevel">
            <option value="3">Company</option>
            <option value="5">End-User</option>
        </select>
    </span>
</p>
<input type="submit" value="Submit" />
 </form>
    <hr />
    <footer>
        <p>&copy; 2014 - My ASP.NET Application</p>
    </footer>
</div>

<script src="/Scripts/jquery-2.1.0.js"></script>

<script src="/Scripts/bootstrap.js"></script>

ОТВЕТЫ

Ответ 1

По какой-то причине помощники HTML не имеют сгенерированных атрибутов проверки во входных данных (data-val = "true" и другие), проверьте это. Кроме того, чтобы проверить порядок загрузки библиотек javascript:

<script src="~/Scripts/jquery.js"></script>    
<script src="~/Scripts/jquery.validation.js"></script>    
<script src="~/Scripts/jquery.validation.unobtrusive.js"></script>

Ответ 2

Вероятно, у вас есть jQuery в нижней части файла, но вы ставите jquery.validate вверху. jQuery должен появиться перед jQuery.validate. Я бы предложил всегда помещать jQuery в ваш заголовок, а не в тело, и это должно быть первым после модернизации.

Кроме того, вы знаете, что jQuery 2.x не работает с предыдущей версией IE8?

Ответ 3

Кажется, что ваш jquery.validate.js находится в неправильном положении. Это должно быть после основного jquery ref.

Для MVC 5 он должен быть следующим:

_Layout.cshtml: (внизу страницы)

<body>
...
...
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval") <!-- *required for client side validation! -->
@RenderSection("scripts", required: false)
</body>

где ~/bundles/jqueryval определяется в BundleConfig.cs: RegisterBundles():

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate*"));

Ответ 4

Использование:

@Html.EditorFor

Вместо:

<input>

И, конечно, вам нужны сценарии jquery.validate.*

Ответ 5

ПОПРОБУЙТЕ ЭТО: Ваша проверка не выполняется, потому что у вас есть жесткая кодировка этой версии JQuery в нижней части вашей страницы, которая, вероятно, была обновлена ​​до более новой версии в вашей папке Scripts:

<script src="/Scripts/jquery-2.1.0.js"></script>

Все, что вам нужно сделать, это перейти к "Scripts", посмотреть, есть ли файл jquery-2.1.0.js или вы обновили JQuery до более новой версии. Введите новое имя файла версии, если оно найдено, и повторите проверку. Теперь он должен работать. По состоянию на июнь 2017 года мы находимся на JQuery версии 3.1.1

Это случилось со мной, и я вытащил свои волосы, пока не понял, что обновил JQuery и увидел, что он удалил старую версию. Держу пари, что твоя проблема. В случае, если вы этого не делаете, я рекомендую вам не следовать шаблонам View page, которые придерживаются скриптов проверки на страницах просмотра, и вместо этого создавать простую страницу управления пользователями или главной страницы или макета и набивать ваши ссылки JQuery там, чтобы они были универсальными для всех страницы проекта. Браузер, естественно, будет кэшировать эти страницы в первый раз, поэтому даже если они не будут использоваться на других страницах, они не будут загружены снова.

Ответ 6

Не уверен, что это загружается динамически (например, загрузка частичного представления с помощью Ajax). Если это так, вам нужно проанализировать html с помощью валидатора на успех, например. Используйте что-то вроде...

$.validator.unobtrusive.parse(".target");

например.

 function loadAPartialView(endPoint) {                    
                $.ajax({
                    url: endPoint,
                    type: 'GET',
                    cache: false,
                    success: function (result) {

                        $('.target').html(result);
                        $('.target').show();

                        // IMPORTANT. Next line is required to get the client side validation to run.
                        $.validator.unobtrusive.parse(".target");
                        $(".loadingMessage").hide(); 
                    },
                    error: function (result) {
                           // Error message... 
                           $(".loadingMessage").hide();

                    }
                });
            };

Ответ 7

Убедитесь, что вы используете Attributes (например, RequiredAttribute), которые находятся в пространстве имен System.ComponentModel.DataAnnotations