it-swarm.com.de

Unauffällige clientseitige Validierung in MVC4 funktioniert nicht

Ich habe eine Layoutseite mit allen Skripts wie unten gezeigt.

<!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>

Dann habe ich mein Anmeldeformular wie gezeigt

@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>

Mein Account Model-Kurs ist wie folgt:

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

dabei ist jede Eigenschaft auch eine Modellklasse mit eigenen EditorTemplates

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

und haben Name.cshtml EditorTemplate wie folgt

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

Ähnlich für Address.cshtml und Phone.cshtml

in web.config: - 

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

Wenn Sie auf die Schaltfläche Registrieren in einem leeren Formular klicken, wird eine Ajax-Post-to-Register-Methode [HttpPost] durchgeführt. Warum gibt es mir keine clientseitigen Validierungsnachrichten, ich glaube, es heißt unauffällige Validierung? Ich sehe auch keine Fehler in der Konsole.

11
user2232861

Der Submit-Button muss vom Typ 'submit' sein, um die Validierung der Jquery-Validierung auszulösen, unabhängig davon, ob das Jquery-Plugin allein oder mit dem unauffälligen Plugin verwendet wird.

Das würde also die Validierung auslösen:

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

Da Sie jedoch bereits etwas Code geschrieben haben, um das Klicken der Schaltfläche zu handhaben, ist es möglicherweise einfacher, die Validierung manuell auszulösen

$("#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

Ich denke, Sie müssen die Skriptreferenzen neu ordnen

<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

Ich hatte auch ein ähnliches Problem, das einige Wochen zum Debuggen benötigte. Ich benutzte die aspx-Seite. 

Die Hauptursache war, dass die AnweisungHtml.BeginForm nach einem <table>-Tag platziert wurde.

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

Das <form>-Tag wurde vor jedem <input>-Tag geschlossen, und die unauffällige Clientüberprüfung funktioniert nicht.

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

Denken Sie also daran, das Html.BeginForm vor dem <table>-Tag einzugeben

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

wenn Sie _Layout.cshtml verwenden, entfernen Sie die folgende Referenz

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

auf der Unterseite 

diese Arbeit für mich!

0
jcmordan

Ich hatte das gleiche Problem und fand das, wenn ich anrief 'element.valid ()' bevor der Aufruf der Funktion zur Überprüfung der Funktion der Bibliothek stattfand, wird mein Formular nicht mehr überprüft. Ich habe dieses Problem gelöst, indem ich eine Erweiterung erstellt habe, die überprüft, ob das Formular verarbeitet wurde, und nur überprüft, ob das Element gültig ist

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