web-dev-qa-db-fra.com

La validation côté client discrète dans MVC4 ne fonctionne pas

J'ai la page de mise en page avec tous les scripts comme indiqué ci-dessous.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Site</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <some custom css>
    <modernizr>
    <script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
    <some custom scripts>
    <bootstrap scripts>
    <knockout scripts>           
</head>
<body>
  @RenderBody()
</body>
</html>

Ensuite, j'ai mon formulaire d'inscription comme indiqué

@model Mysite.Models.Account.Account
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" }))
{
 @Html.AntiForgeryToken();
 <h1>Login</h1>
 @Html.ValidationSummary();
 @Html.EditorFor(m => m.Name)
 @Html.EditorFor(m => m.Address1)
 @Html.EditorFor(m => m.Address2)
 @Html.EditorFor(m => m.Phone1)
<input type="button" value="Register" id="btn1" />
}
<script>
var form = $("#register");
 $("#btn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            url: 'http://localhost:3885/Account/Register',
            data: form.serialize(),
            type: 'POST',
            success: function (result) {},
            error: function (req, status, error) {
                function(req, status, error);
            }
        });
    });
</script>

Ma classe de modèle de compte est la suivante:

public class Account
{
   public Name name {get; set;}
   public Address Address1 {get; set;}
   public Address Address2 {get; set;}
   public Phone Phone1 {get;set;}
}

où chaque propriété est également une classe de modèle avec ses propres EditorTemplates, par exemple

public class Name
{
   [Required]
   public string FirstName {get; set;} 
   public string MiddleName {get; set;}
   [Required]
   public string LastName {get; set;}
}

et ayez Name.cshtml EditorTemplate comme ci-dessous

<div >
 @Html.TextBoxFor(m=>m.FirstName);
 @Html.TextBoxFor(m=>m.MiddleName);
 @Html.TextBoxFor(m=>m.LastName);
<div>

de même pour Address.cshtml et Phone.cshtml

dans web.config: - 

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

En cliquant sur le bouton Enregistrer sur un formulaire vide, il effectue une opération ajax pour enregistrer la méthode du contrôleur [HttpPost]. Pourquoi ne me donne-t-il pas des messages de validation côté client? Je pense que cela s'appelle validation non intrusive? Je ne vois pas non plus d'erreur dans la console.

jqueryasp.net-mvcjquery-validateunobtrusive-validationclient-side-validation
11
user2232861

Le bouton submit doit être de type 'submit' pour déclencher la validation de la validation jquery, que vous utilisiez le plugin jquery seul ou avec le plugin discret.

Donc, cela déclencherait la validation:

<input type="submit" value="Register" id="btn1" />

Mais vu que vous avez déjà écrit du code pour gérer le clic sur un bouton, il pourrait être plus facile de déclencher manuellement la validation.

$("#btn1").click(function (e) {

      e.preventDefault();

      // now trigger the form validation, result is 1 or 0
      var result = $('form').valid();  

      $.ajax(
         // details omitted
      );
});
19
Dr Blowhard

Je pense que vous devez réorganiser les références de scripts

<script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
3
Khaled Musaied

J'ai également eu un problème similaire qui a nécessité quelques semaines pour déboguer ..__ J'utilisais une page aspx. 

La cause principale était queHtml.BeginForm &EACUTE;TAIT PLAC&EACUTE; APR&EGRAVE;S UNE BALISE <table>.

<table>
   <% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
</table>

Cela a entraîné la fermeture de la balise <form> avant toute balise <input>, et donc la validation du client non intrusive ne fonctionnant pas.

<form action="/Admin/ContainerManagement" method="post" novalidate="novalidate"></form> <tr> <td><input></td> </tr>

Donc, n'oubliez pas de mettre la balise Html.BeginForm before <table>

<% using (Html.BeginForm("ContainerManagement", "Admin", FormMethod.Post)){%>
<table>...</table>
<% } %>
0
erwin huang

si vous utilisez _Layout.cshtml, supprimez la référence suivante

@Scripts.Render("~/bundles/jquery")

sur le fond 

ça marche pour moi!

0
jcmordan

J'ai eu le même problème et constaté que si j'appelle 'element.valid ()' avant que l'appel de la bibliothèque à valider la fonction se produise, il ne validera plus mon formulaire J'ai résolu ce problème en créant une extension qui vérifie si le formulaire a été traité et ne vérifie que si l'élément est valide.

 $.fn.revalidate = function () {
        if (this.length) {
            var validator = this.closest("form").data("validator");
            if (validator)
                validator.element(this);
        }
        return this;
    };
0
emanuel.virca