Bei der unauffälligen Validierung von jQuery wird die Klasse "cancel" auf der Schaltfläche "submit" ignoriert, wenn sie in Ajax-Formularen verwendet wird

Ich versuche, die optionale clientseitige Validierung mithilfe von zu implementieren

ASP.NET MVC 4,unauffällige jQuery-Validierung,unauffällige AjaxDas funktioniert gut

Die folgenden Bilder zeigen, was ich mit optionaler clientseitiger Validierung meine: Das einzige Feld in meinem Formular enthält voraussichtlich E-Mails, daher ist ein E-Mail-Validierer angehängt.

Nun klicken wir auf Speichern. Weil unser Text"name @ doamin" ist keine gültige E-Mail, die Validierungszusammenfassung wird angezeigt. Zusammen mit der Validierungszusammenfassung blenden wir ein"Trotzdem speichern" Taste.

Dieser zweite Button ist ein normaler Submit-Buttonclass="cancel". Dies weist anjQuery.validate.js Skript zum Überspringen der Validierung beim Senden über diese Schaltfläche.

Hier ist das Code-Snippet der Ansicht:

@using (Html.BeginForm())
{
    <div>
        <input data-val="true" data-val-email="Uups!" name="emailfield" />
        <span class="field-validation-valid" data-valmsg-for="emailfield" data-valmsg-replace="false">*</span>
    </div>

    <input type="submit" value="Save" />
    @Html.ValidationSummary(false, "Still errors:")
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <input type="submit" value="Save anyway" class="cancel" />
    </div>
}

Das alles funktioniert gut.

Das Problem

Der zweite Submit-Button -"Trotzdem speichern" funktioniert nicht mehr wie erwartet, wenn ich auf Ajax-Formular umschalte. Es verhält sich einfach wie das normale und verhindert das Senden, bis die Validierung erfolgreich ist.

Hier ist das Code-Snippet der "ajaxified" -Ansicht:

@using (Ajax.BeginForm("Edit", new { id = "0" },
        new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "ajaxSection",
            }))
{
    <div>
        <input data-val="true" data-val-email="Uups!" name="emailfield" />
        <span class="field-validation-valid" data-valmsg-for="emailfield" data-valmsg-replace="false">*</span>
    </div>

    <input type="submit" value="Save" />
    @Html.ValidationSummary(false, "Still errors:")
    <div class="validation-summary-valid" data-valmsg-summary="true">
        <input type="submit" value="Save anyway" class="cancel" name="saveAnyway" />
    </div>
}

Ich habe debuggedjQuery.validation.js herauszufinden, was ist der Unterschied, aber gescheitert.

Frage

Alle Ideen, um das Problem zu beheben oder zu umgehen und das Ajax-Formular wie beabsichtigt verhalten zu lassen, sind willkommen.

Nachtrag

Ein ... Habenclientseitige Validierung ist ein absolutes Muss. Die serverseitige Überprüfung ist keine Option. Abgesehen von höherem Datenverkehr (dieses Beispiel ist eine Vereinfachung - das reale Formular enthält viel mehr Felder) und Latenz gibt es eine Sache, die die serverseitige Validierung nicht tun würde: Clientseitige Validierer markieren fehlerhafte Felder bei Fokusverlust. Dies bedeutet, dass Sie eine Rückmeldung erhalten, sobald Sie zum nächsten Feld wechseln.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage