web-dev-qa-db-fra.com

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

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

Voici mon 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 le 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é 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>

c#asp.netasp.net-mvcjquery-validateunobtrusive-validation
12
Zapnologica

Pour une raison quelconque, les assistants HTML n'ont pas généré d'attributs de validation dans les entrées (data-val = "true" et les autres), vérifiez cela. En plus de vérifier l’ordre dans lequel les bibliothèques javascript sont chargées:

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

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

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

10
Erik Funkenbusch

Il semble que votre jquery.validate.js soit dans une mauvaise position. Ce doit etre apres jquery principale ref.

Pour MVC 5, cela 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*"));
3
S.Serpooshan

Utilisation:

@Html.EditorFor

Au lieu de: 

<input>

Et bien sûr, vous avez besoin des scripts jquery.validate.*

2
Mohammad J Uddin Murad

ESSAYEZ CECI: Votre validation échoue car vous avez codé en dur cette version du lien JQuery au bas de votre page, qui a probablement été mise à jour vers une version plus récente de votre dossier Scripts:

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

Tout ce que vous avez à faire est d'aller dans "Scripts", voir s'il existe un fichier "jquery-2.1.0.js" ou si vous avez mis à jour JQuery vers une version plus récente. Tapez le nom de fichier de la version la plus récente, le cas échéant, et renouvelez le test. Cela devrait fonctionner maintenant. Depuis juin 2017, nous sommes sur la version 3.1.1 de JQuery.

C'est ce qui m'est arrivé et je tirais les cheveux jusqu'à ce que je réalise que j'avais mis à jour JQuery et que je l'ai vu supprimer l'ancienne version. Je parie que c'est votre problème. Au cas où vous ne le feriez pas, je vous recommande de ne pas suivre les modèles de page d'affichage collant les scripts de validation dans les pages d'affichage, mais de créer une simple page usercontrol ou masterpage ou layout view et d'y insérer vos liens JQuery afin qu'ils soient partagés universellement par tous. pages de projet. Le navigateur mettra naturellement ces pages en cache dès la première fois. Ainsi, même si elles ne sont pas utilisées sur d'autres pages, elles ne sont pas chargées à nouveau.

0
Stokely

Vous ne savez pas si cela est chargé dynamiquement (par exemple, en chargeant une vue partielle avec Ajax). Si tel est le cas, vous devez analyser le code HTML avec le validateur, p. Ex.

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

Par exemple.

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

                    }
                });
            };
0
CYoung