Wie in ASP.NET MVC verhindern jquery ajax einreichen, wenn die Validierung fehlschlägt

Question

I ASP.NET 5 MVC RC1

die jQuery Validierung Plugins bin, die meine ASP.NET MVC verwendet der Standard jquery.validate.js ist, dass ein ASP.NET Standard 5 Vorlagenprojekt verwendet.

/*! 
* jQuery Validation Plugin v1.14.0 
* 
* http://jqueryvalidation.org/ 
* 
* Copyright (c) 2015 Jörn Zaefferer 
* Released under the MIT license 
*/ 

und jquery.validation.unobtrusive.js

/*! 
** Unobtrusive validation support library for jQuery and jQuery Validate 
** Copyright (C) Microsoft Corporation. All rights reserved. 
*/ 

I bietet ein einfaches Pflichtfeld Beispiel unten mein Problem zu demonstrieren.

Ansichtsmodell:

public class TierImportStatusUpdateViewModel 
{ 
    [Required] 
    public string String1 { get; set; } 
    [Required] 
    public string String2 { get; set; } 
    //more fields 
} 

cshtml:

@model MyViewModel 
<form action="/controller/action" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#dic1" id="form1" method="post" class="allforms"> 
    @Html.LabelFor(model=>model.String1) 
    @Html.EditorFor(model=>model.String1) 
    @Html.ValidationMessageFor(model=>model.String1) 
    <br> 
    @Html.LabelFor(model=>model.String2) 
    @Html.EditorFor(model=>model.String2) 
    @Html.ValidationMessageFor(model=>model.String2) 
    <br> 
    <button type="submit" class="btn btn-primary" id="submit" name="submit">submit</button> 
</form> 

Die obige Validierung korrekt funktioniert. Wenn String1 nicht in der Form erfasst wird, wird die POST Methode nicht aufgerufen und Fehlermeldung wird auf der Clientseite angezeigt.

Ich benutze das folgende Jquery dann, als ich alle Formular abschickt fangen möchte und einige zusätzliche Logik tun:

$(".allforms").submit(function (e) { 

     e.preventDefault(); 

     var self = this; 
     $.ajax({ 
      processData: false, 
      contentType: false, 
      data: new FormData(this), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function (data) { 
       //other logic 
      } 
     }); 

     return (false); 
    }); 

Diese Funktion arbeitet jquery und mein Controller-Methode aufrufen, wenn die Schaltfläche geklickt wird. Wenn jedoch String1 nicht erfasst wird und auf "Senden" geklickt wird, tritt die Validierung ein und zeigt die Fehlermeldung an, aber die jquery-Funktion zeigt das Formular weiterhin an.

Wie verhindere ich, dass die jquery-Funktion die Ajax-Methode nicht aufruft, wenn die vorhandenen Validierungsfelder fehlgeschlagen sind?

Ich brauche keine eigene Validierung, da die Validierungsmeldung auf dem Bildschirm angezeigt wird. Ich muss nur die

Das einzige, was einreichen verhindere ich in meiner Form finden könnte, ist die einzelnen Validierungsfelder zB

<span class="text-danger field-validation-valid" data-valmsg-for="String1" data-valmsg-replace="true"></span> 

und die Form hat nur die novalidate=novalidate-Tag, das die jquery.validate.js auf alle Formen fügt es ist aktiviert.

Answer 1

Sie müssen bedingt die Ajax-Aufruf machen nur, wenn das Formular gültig ist, die mit diesem Javascript-Code getan werden kann:

if ($("#form1").valid()) { 
    // make the ajax call 
} 

Die Dokumentation ist hier: .valid().

Bitte überprüfen Sie, dass die ID des Formulars in der generierten Seite in der Tat form1 ist. Wenn nicht, gibt es alternative Selektoren, die Sie verwenden können, oder Möglichkeiten, die ID zu erhalten, die vom Razor-Code generiert wird.

HINWEIS: Wenn ich Ihren Code erneut lese, sehe ich, dass Sie einen einzigen Handler für alle Formulare verwenden. In diesem Fall müssen Sie die Methode .valid() in der Form aufrufen, die das Ereignis ausgelöst hat, das jedoch über $(this) verfügbar ist. Machen Sie $(this).valid(), um zu überprüfen, ob das Formular gültig ist.

Answer 2

Zuerst nicht verwenden e.preventDefault(); es wird verhindern, dass eine Absenden-Schaltfläche ein Formular abschicken.

In Ihrer Funktion $(".allforms").submit erste Formular

wie diese wird truevar frmVlalidation = $('#formId').valid();

wenn das Formular validiert richtig frmVlalidation Wert überprüfen, ob die Validierung fehlschlägt es false zurückkehren wird.

mit dieser Variablen Call Ajax.

so.

$(".allforms").submit(function (e) { 

     var frmVlalidation = $('#formId').valid(); 

     if (frmVlalidation == true) 
     { 
     var self = this; 
     $.ajax({ 
      processData: false, 
      contentType: false, 
      data: new FormData(this), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function (data) { 
       //other logic 
      } 
     }); 
     } 

     return (false); 
    }); 

Answer 3

Der richtige Weg, Ajax mit diesem Plugin zu verwenden, ist die Ajax innerhalb des Plugins submitHandler Callback-Funktion zu setzen.

"The right place to submit a form via Ajax after it is validated."

Von Dokumentation

Beispiel: das Formular abschickt über Ajax als gültig.

Dies stellt sicher, dass, wenn das Formular gültig ist, nur Formular eingereicht wird.