Asp.net mvc validation côté client ne fonctionne pas?

Pour une raison quelconque, mon la validation côté client ne semble pas fonctionner:

Voici mon code 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" />

Voici mon modèle:

 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; }
}

et j'ai, côté client activé dans le 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} ajoutée rendu 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>

source d'informationauteur Zapnologica

asp.net asp.net-mvc c#jquery-validate unobtrusive-validation

16

Pour une raison quelconque, le Html helpers n'a pas généré de validation des attributs dans les entrées (données-val="true" et les autres), vérifier que. En plus de vérifier l'ordre dans lequel les bibliothèques javascript sont chargés:
```
<script src="~/Scripts/jquery.js"></script>    
<script src="~/Scripts/jquery.validation.js"></script>    
<script src="~/Scripts/jquery.validation.unobtrusive.js"></script>    
```
9

Votre problème est probablement que vous avez jQuery en bas de votre fichier, mais vous mettez en jquery.valider en haut. jQuery a venir avant de jQuery.valider. Je suggère toujours de mettre jQuery dans votre en-tête, pas dans le corps, et elle devrait être la première chose après modernizr.

Aussi, vous savez que jQuery 2.x ne fonctionne pas avec IE8 minerai plus tôt, non?

Il semble que votre jquery.validate.js est dans la mauvaise position. Il doit être après le principal jquery réf.

Pour MVC 5, il devrait être comme suit:

_Layout.cshtml: (bas de page)

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

où ~/bundles/jqueryval est défini dans BundleConfig.cs: RegisterBundles() méthode:

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

2

Utilisation:
```
@Html.EditorFor
```
Au lieu de:
```
<input>
```
Et bien sûr, vous avez besoin de la jquery.validate.* scripts
0

ESSAYEZ CECI: Votre validation échoue parce que vous avez codé en dur cette JQuery lien de la version en bas de votre page, ce qui a probablement été mis à jour vers une version plus récente dans votre dossier Scripts:
```
<script src="/Scripts/jquery-2.1.0.js"></script>
```
Tout ce que vous devez faire est d'aller à "Scripts", voir si il y a un "jquery-2.1.0.js" fichier ou la mise à jour de JQuery vers une version plus récente. Type dans la version la plus récente de nom de fichier, dans ce cas, et refaites le test. Il devrait maintenant fonctionner. À compter de ce mois de juin 2017, nous sommes sur la version JQuery 3.1.1

Ce qui m'est arrivé et j'ai été en tirant mes cheveux jusqu'à ce que je ai réalisé que j'avais mis à jour JQuery et a vu l'a supprimé l'ancienne version. Je parie que c'est votre problème. Dans le cas où vous ne le faites pas, je vous recommande de ne pas suivre la Page d'Affichage des modèles qui collent les scripts de validation en Vue de Pages et de créer à la place un simple contrôle utilisateur ou masterpage ou de mise en page et les trucs de votre JQuery liens là-bas, alors qu'ils sont partagés par toutes les pages du projet. Le navigateur va naturellement cache ces pages la première fois, de sorte que même si elles ne sont pas utilisées sur d'autres pages, ils ne sont pas chargés à nouveau.

Ne sais pas si cela est en train d'être chargé dynamiquement (e.g le chargement d'une vue partielle avec l'Ajax). Si oui, alors vous devez analyser le code html avec le validateur sur le succès par exemple
Utilisez quelque chose comme...

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

E. g.

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

Vous devez vous connecter pour publier un commentaire.