Come usare il plugin jQuery Validation con i metadati, le forme jQuery e xVal insieme?

Question

Ho fatto un po 'di sviluppo utilizzando il xVal framework for .NET per collegare alcune delle regole di convalida per i modelli sul lato server insieme ad alcuni validazione lato client utilizzando il jQuery convalida plug lungo con la jQuery modulo plug per inviare il modulo.

Tuttavia, sto avendo problemi li collega tra loro.

Sto cercando di realizzare seguente:

1. permettere al cliente di eseguire la convalida di base con regole definite chiamando plug rules("add", options") per jQuery Validation (questo è quello che utilizza xVal per ottenere regole definite sul lato server del modello).

2. Se la convalida del client ha esito positivo, effettuare la chiamata al server per inserire i dati del modulo dello spettacolo nuovo convalida (su elementi che sono stati convalidati sul client, così come qualsiasi altra convalida che non poteva essere eseguita nel client ).

3. che il server restituisce un oggetto in JSON che indicano eventuali errori che potrebbero avere campi specifici e quindi impostare la visualizzazione di errore per i campi.

ho impostato i metadati per il plugin nella pagina ASP.NET MVC attraverso una chiamata al xVal nel seguente modo:

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

Questo si traduce in seguito sul lato client:

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

È possibile che questo in realtà si traduce solo in una serie di chiamate a rules("add", options) cui il validatore plugin jQuery quindi i processi.

Tuttavia, quando si cerca di inviare il presente modulo tramite forme di jQuery, la convalida non avviene sui valori della forma. La forma sostiene, ma i valori non vengono convalidate a tutti.

Come posso inviare il modulo utilizzando il plugin jQuery Modulo mentre viene convalidato dal plugin jQuery convalida tramite una chiamata al ajax?

Answer 1

Il più importante cosa da guardare fuori per quando mettere tutto questo insieme è il piccolo pezzo di documentazione (che non è davvero evidente nella documentazione per xVal, che astrae la chiamata a rules("add", options) in la chiamata a xVal.AttachValidator) per rules("add", options) (sottolineatura mia):

  

Aggiunge le regole e le dichiarazioni specificati   tutte le regole per il primo abbinato   elemento. Richiede che il genitore   modulo viene convalidato, cioè,   $ ( "Forma"). Validate () viene chiamato   prima.

Questo è particolarmente importante quando il plugin jQuery Modulo entra in gioco, e si desidera inviare il modulo tramite la tecnologia AJAX, come si deve impostare un'opzione submitHandler nella chiamata a validate(options) , in questo modo:

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

A causa della documentazione citata sopra per quanto riguarda le chiamate al rules("add", options), la chiamata a validate(options) deve venire prima delle chiamate al rules("add", options) .

Se non lo fanno, allora la submitHandler viene ignorato, mai chiamato.

Alla fine, questo significa che il codice lato client deve assomigliare a questo quando mettere tutto insieme:

<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") %>

Infine, con tutto questo cablato, l'ultima cosa da fare è che cosa fare quando il metodo lato server restituisce.

Ti consigliamo la JSON che è tornato da queste chiamate ad essere qualcosa di simile a un guscio viewmodel standardizzata dove si ha il contenuto specifico di risposta avvolto in un pezzo più standardizzato che espone le informazioni necessarie attraverso chiamate omogenei, qualcosa di simile a questo:

{
    // 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
}

Per gli errori sul server, restituire lo stesso come sopra, ma con una posizione che ha l'URL cui l'utente deve essere reindirizzato a in caso di successo (o null se non fosse successo) e una mappa che può essere passata direttamente al metodo showErrors(errors) se ci sono errori sui campi:

{
    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."
        }
    }
}

Dato che, il campo success del parametro options passato a ajaxSubmit dovrebbe essere chiaro:

// 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);
}

Tutto ciò che fa è controllare per vedere se la proprietà newLocation è definito. Se è definita, quindi reindirizza il documento corrente alla posizione (che in genere sarebbe l'URL della risorsa appena salvata).

Se non è definito, allora ci vuole la mappa e lo passa al showErrors sul validatore restituito da una chiamata a validate(options), impostare i messaggi di errore con il posizionamento e lo stile specificato dalla chiamata a validate(options).