webentwicklung-frage-antwort-db.com.de

Die clientseitige Validierung funktioniert nicht in ASP.NET MVC5 mit Bootstrap

Mit Visual Studio 2013 habe ich ein neues ASP.NET MVC (5) -Projekt mit Bootstrap erstellt.

Ich kann jedoch keine unauffällige clientseitige Validierung abrufen.

Das Modell verfügt über [Required]-Attribute für die relevanten Eigenschaften, und die Ansicht enthält ValidationMessageFor...-Tags für jedes Feld im Formular.

Das Senden des Formulars bewirkt jedoch ein Postback auf dem Server, bevor Überprüfungsmeldungen angezeigt werden.

Mit NuGet habe ich jquery.validate und jquery.validate.unobtrusive installiert und dem Jquery-Bundle in App_Start hinzugefügt.

Trotzdem postet es hartnäckig wieder auf den Server. F12-Entwicklertools zeigt keine JS-Fehler/Warnungen an.

Ist jemand anderes auf dieses Problem gestoßen (kann nichts in SO speziell zu MVC 5) sehen und haben Sie irgendwelche Ideen?

27
SimonGoldstone

Ich hatte das gleiche Problem. Die Lösung besteht darin, der Masterseite (_Layout.cshtml) eine .js-Referenz hinzuzufügen.

  1. jquery.validate.js 
  2. jquery.validate.unobtrusive.js
21
user2934829

Ich hatte das gleiche Problem. Beim Vergleich des generierten HTML-Codes mit einer funktionierenden Website bemerkte ich, dass am Ende des Dokuments Folgendes angezeigt wurde:

<script src="/bundles/jqueryval"></script>

... während das Bündel so erweitert worden sein sollte:

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

Ich habe in App_Start/BundleConfig.cs nachgesehen, und das JQuery-Validierungs-Bundle wurde nicht in RegisterBundles definiert. Ich musste hinzufügen:

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

Warum das fehlte, weiß ich nicht. Ich habe mit einem neuen, sauberen Projekt angefangen.

Es ist ziemlich bescheiden, dass beim Verweisen auf ein nicht definiertes Bundle kein Fehler beim Kompilieren auftritt. Sogar ein ständig aktiver Laufzeitfehler wäre besser als ein stiller Ausfall. So viel Zeit verschwendet!

BEARBEITEN: Es stellte sich heraus, dass ich auch keine JQuery-Validierungsskripts in meinem Projekt hatte. Ich musste sie über NuGet hinzufügen ("Microsoft JQuery Unauffällige Validierung").

19
Gary McGill

Haben Sie <add key="ClientValidationEnabled" value="true" /> in web.config überprüft?

Ansonsten bietet dies einen guten Überblick: ASP.NET MVC 3: Erforderliche Schritte für die unauffällige clientseitige Validierung dynamischer/AJAX-Inhalte . Gilt auch für MVC5.

14
flip

Fügen Sie am Ende der Seite Folgendes hinzu:

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

und alles wird gut funktionieren.

7
Maulik Anand

Da die Tour mit MVC nicht zu jeder Bearbeitungsansicht hinzugefügt werden muss, können Sie sie im Ordner view/shared unter _Layout.cshtml hinzufügen.

einfach hinzufügen

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

am unteren Rand von _Layout.cshtml, oben auf

@Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/jqueryval")

in diesem Fall wirkt sich das Skript auf alle Seiten aus, die dieses Layout verwenden.

3
nasolev

Ich hatte das gleiche Problem, als ich mit meinem ersten MVC-Projekt spielte. Das Problem war am Ende, dass ich nicht die Eingabeelemente in das Formularelement einschließenJa, sehr dumm. Stellen Sie sicher, dass Sie das Formular erstellen, zum Beispiel:

@using (Html.BeginForm())
{
    @Html.EditorFor(model => model.FieldA)
    @Html.ValidationMessageFor(model => model.FieldA)

    @Html.EditorFor(model => model.FieldB)
    @Html.ValidationMessageFor(model => model.FieldB)

}
2
veb

Ich weiß, das ist ein bisschen spät im Spiel, aber das fügt der Validierung mehr hinzu und ich fand es sehr hilfreich. In Konflikt stehende Javascript/jQuery Plugin/API-Verweise (z. B. searchMeme.js), die auf andere Jquery-Versionen verweisen, können Probleme verursachen. Daher erstelle ich eindeutige Pakete für Kontoanmeldungsaktionen. Dies sind die Schritte, die ich unternehmen würde:

1. Erstellen Sie ein separates Layout ~/Views/Shared/_AccountLayout.cshtml für AccountController.cs

2. Neues ~/Account/_ViewStart.csthml erstellen mit:

@{
    Layout = "~/Views/Shared/_AccountLayout.cshtml";
}

3. Erstellen Sie zwei Pakete für css & js in BundleConfig.cs für AccountController:

   bundles.Add(new StyleBundle("~/Content/accountcss").Include(
                "~/Content/site.css",
                "~/Content/bootstrap.css",
                "~/Content/font-awesome.css")); /*if using font-awesome */

   bundles.Add(new ScriptBundle("~/bundles/accountjs").Include(
                "~/Scripts/jquery-1.10.2.js",
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/bootstrap.js"));//must be after jquery validate

4. Referenzieren Sie die Bundles an beiden Enden von head & body in _AccountLayout.cshtml als solche:

        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
         @Styles.Render("~/Content/accountcss")
        @Scripts.Render("~/bundles/modernizr")
        @this.RenderSection("MetaContent", false)
        @this.RenderSection("Styles", false)
        </head>

        @Scripts.Render("~/bundles/accountjs")
        @this.RenderSection("Scripts", false)
        </body>

* HINWEIS: Stellen Sie sicher, dass der Bootstrap nach jqueryval im Bundle ist

5. Stellen Sie sicher, dass Sie @Html.ValidationMessageFor für jedes Eingabefeld in ~/Account/Login.cshtml, ~/Account/Register.cshtml usw. haben.

<div class="form-group">
       @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
          <div class="col-md-10">
               @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
          </div>
</div>

6. Verwenden Sie DataAnnotations, um weitere benutzerdefinierte Validierungsfehler zu erstellen. [RegularExpression(@"^([\w]{2,20})@?([\w]{2,20}).?[a-zA-Z]{2,3}$", ErrorMessage="")]:

[Required(ErrorMessage = "*Username is required."), RegularExpression(@"^[\w+]{3,10}\s?([\w+]{3,15})$", ErrorMessage = "*Username can only be Alphanumeric"),StringLength(25, ErrorMessage = "The {0} must be at least {2} characters long and no bigger than {1} characters.", MinimumLength = 5)]
public string UserName { get; set; }

7. (optional) Wenn Sie schließlich die DataAnotation für das Kennwort geändert haben, müssen Sie auch die Kennwortrichtlinie in ~/App_Start/IdentityConfig.cs ändern:

manager.PasswordValidator = new PasswordValidator
{
    RequiredLength = 6,
    RequireNonLetterOrDigit = false,
    RequireDigit = true,
    RequireLowercase = true,
    RequireUppercase = true,
};

8. (optional) Schauen Sie sich auch diesen Artikel über Rollen usw. an. 

2
yardpenalty

Ich hatte das gleiche Problem, meine Lösung löscht den gesamten Verlauf im Browser (Cache, Cookies, Formular, ...) und alles funktioniert einwandfrei.

2
Kien

Ich gebe diese Antwort für zukünftige Leser. Ich beschäftigte mich mit dem gleichen Thema und stellte fest, dass das Problem in der Reihenfolge der Render-Skripts liegt. Stelle sicher 

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

ist vor

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

in _layout.cshtml ..__ Der untere Teil des Layouts sollte wie folgt aussehen.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
0
Garry

Ich denke, @ Html.ValidationMessageFor fehlt in der Vorlage. Ich bekomme die Fehler, aber nicht die Meldungen.

0
jgarza