Wie benutze ich das JQuery Validierungs -Plugin mit Metadaten, JQuery -Formularen und XVAL zusammen?

Question

Ich habe die Entwicklung mit dem gemacht xval Framework für .NET, um einige der Validierungsregeln für Modelle auf der Serverseite zusammen mit einer clientseitigen Validierung mit dem zu verknüpfen JQuery Validation Plugin zusammen mit JQuery Form Plugin zum Einreichen des Formulars.

Ich habe jedoch Probleme, sie alle zusammen zu verbinden.

Ich versuche die folgende zu erreichen:

1. Erlauben Sie dem Client, eine grundlegende Validierung mithilfe von Regeln durchzuführen, die durch Anrufe definiert wurden rules("add", options") Plugin für die JQuery -Validierung (so verwendet XVAL, um Regeln auf der Serverseite auf dem Modell zu definieren).

2. Wenn die Client -Validierung erfolgreich ist, rufen Sie den Server auf, um die Formulardaten erneut einzugeben, die die Validierung erneut ausführen (auf Elementen, die auf dem Client validiert wurden, sowie jede andere Validierung, die im Client nicht durchgeführt werden konnten).

3. Lassen Sie den Server ein Objekt in JSON zurückgeben, das alle Fehler angibt, die möglicherweise bestimmte Felder haben, und dann die Fehleranzeige für die Felder festlegen.

Ich habe die Metadaten für das Plugin auf der ASP.NET -MVC -Seite über einen Aufruf von XVAL auf folgende Weise eingerichtet:

<%= Html.ClientSideValidation<Model>("model") %>

Dies führt zu Folgendem auf der Clientseite:

<script type="text/javascript">
xVal.AttachValidator("model", 
{
    "Fields": 
    [ 
        {
            "FieldName":"title",
            "FieldRules": 
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                },
                {
                    "RuleName":"StringLength",
                    "RuleParameters":
                    {
                        "MaxLength":"250"
                    }
                }
            ]
        },
        {
            "FieldName":"body",
            "FieldRules":
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                }
            ]
        }
    ]
}, {})
</script>

Das Obige übersetzt sich wirklich in eine Reihe von Aufrufen zu rules("add", options) das das JQuery Validator -Plugin dann verarbeitet.

Wenn Sie jedoch versuchen, dieses Formular über JQuery -Formulare zu veröffentlichen, findet die Validierung nicht auf den Formularwerten statt. Das Formular reicht vor, aber die Werte sind überhaupt nicht validiert.

Wie kann ich das Formular mit dem JQuery -Formular -Plugin einreichen, während ich durch das JQuery Validation Plugin über einen Anruf unter validiert werde ajax?

Answer 1

Das am wichtigsten Die Sache, auf die Sie all dies zusammenfügen müssen, ist die kleine Dokumentation (was in der Dokumentation für XVAL nicht wirklich erkennbar ist, was den Aufruf annimmt rules("add", options) im Anruf an xVal.AttachValidator) zum rules("add", options) (Hervorhebung meiner):

Fügt die angegebenen Regeln hinzu und gibt alle Regeln für das erste übereinstimmende Element zurück. Erfordert, dass das übergeordnete Formular validiert ist, dh $ ("Form"). Validate () wird zuerst aufgerufen.

Dies ist besonders wichtig, wenn das JQuery Form -Plugin ins Spiel kommt, und Sie möchten das Formular über AJAX einreichen, da Sie a einrichten müssen submitHandler Option im Anruf an validate(options), wie so:

<script type="text/javascript">
    $(document).ready(function() {
        // Initialize the form.  Store the validator.
        var validator = $("form").validate({

            // Called when the form is valid.
            submitHandler: function(form) {

                // Submit the form via ajax.
                $(form).ajaxSubmit({

                    // The return data type is json.
                    dataType: "json",

                    // The callback on a successful form
                    // submission.
                    success: function(data, statusText) {

                        // If the new location is not null, then
                        // redirect to that location.
                        if (data.data.newLocation) {
                            // Go to the new location.
                            document.location.href = data.data.newLocation;

                            // Get out.
                            return;
                        }

                        // There are errors, pass them to the validator
                        // for display.
                        validator.showErrors(data.data.errors);
                    }
                });
            }
        });
    });
</script>

Wegen der oben angegebenen Dokumentation bezüglich der Anrufe an rules("add", options), der Anruf an validate(options) muss vor die Anrufe kommen rules("add", options).

Wenn dies nicht der Fall ist, wird der Unterfassender ignoriert, nie genannt.

Am Ende bedeutet dies, dass Ihr Client -Seitencode so aussehen muss, wenn Sie alles zusammenstellen:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- Note this is only needed if using xVal. -->
<script type="text/javascript" src="xVal.jquery.validate.js"></script>
<!-- The call to validate the form must come first. -->
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize the form.
        $("form").validate({

            // Called when the form is valid.
            submitHandler: function(form) {

                // Submit the form via ajax.
                $(form).ajaxSubmit({

                    // The return data type is json.
                    dataType: "json",

                    // The callback.
                    success: function(data, statusText) {

                        // Alert the users to the message.
                        window.alert(statusText);
                    }
                });
            }
        });
    });
</script>

<!-- Now make the calls to rules("add", options), AFTER the call to -->
<!-- validate (options). It's separated into another block for      -->
<!-- emphasis, but could be done in the block above.                -->
<script type="text/javascript">
    // Make calls to rules("add", options).
</script>

<!-- Or, if you are using xVal, make the following call in the ASP.NET -->
<!-- page but again, note it must come AFTER the call to               -->
<!-- validate(options).                                                -->
<%= Html.ClientSideValidation<Model>("model") %>

Schließlich ist das Letzte, was zu tun ist, wenn die serverseitige Methode zurückgibt.

Sie möchten, dass der JSON, der von diesen Aufrufen zurückgegeben wird, so etwas wie eine standardisierte ViewModel-Shell entspricht, in der Sie über den reaktionsspezifischen Inhalt in ein standardisierteres Stück eingewickelt sind, in dem die Informationen, die Sie benötigen, über homogene Anrufe aufdecken, so etwas wie folgt:

{
    // An integer, non-zero indicates faulure, with predefined ranges
    // for standard errors across all operations, with other ranges for custom
    // errors which are operation-specific.  Examples of shared errors
    // are not authenticated, not authorized, etc, etc.
    resultCode: 0,

    // A string, which is to be displayed to the user (usually in the
    // form of a jQuery dialog, usually used for the common ranges of
    // errors defined above.
    message: null,

    // An object with operation-specific results.
    data: null
}

Geben Sie für die Fehler auf dem Server genauso wie oben zurück, aber mit einem Ort, an dem die URL, auf die der Benutzer erfolgreich ist showErrors(errors) Methode, wenn auf den Feldern Fehler vorliegen:

{
    resultCode: 0,

    message: null,

    data:
    {
        // Returned as a string.  If not null, then this is the url
        // that the client should be redirected to, as the server-side
        // operation was successful.
        newLocation: null,

        // If not-null, then this is a map which has the names of the
        // fields with the errors, along with the errors for the fields.
        errors:
        {
            "model.title": "The title already exists in the system.",
            "model.body": "The body cannot have malicious HTML code in it."
        }
    }
}

Angesichts dessen die, die success Feld der options Parameter weitergereicht an ajaxSubmit sollte klar sein:

// The callback on a successful form
// submission.
success: function(data, statusText) {

    // If the new location is not null, then
    // redirect to that location.
    if (data.data.newLocation) {
        // Go to the new location.
        document.location.href = data.data.newLocation;

        // Get out.
        return;
    }

    // There are errors, pass them to the validator
    // for display.
    validator.showErrors(data.data.errors);
}

Alles, was es tut, ist zu prüfen, ob die newLocation Eigenschaft ist definiert. Wenn es definiert ist, leitet es das aktuelle Dokument in den Ort weiter (der normalerweise die URL der neu gespeicherten Ressource wäre).

Wenn es nicht definiert ist, nimmt es die Karte und gibt sie an weiter weiter showErrors Auf dem Validator, der durch einen Anruf an zurückgegeben wurde validate(options), Festlegen der Fehlermeldungen mithilfe der durch den Anruf an angegebenen Positionierung und Stil validate(options).