Comment utiliser le plugin de validation jQuery avec les métadonnées, les formulaires jQuery et xVal ensemble?

Question

Je l'ai fait un certain développement en utilisant le xVal cadre de .NET pour relier certains des règles de validation des modèles sur le côté serveur avec une validation côté client en utilisant le jQuery validation du plugin le long avec le jQuery plug-in Form pour soumettre le formulaire.

Cependant, je vais avoir des problèmes qui les relie tous ensemble.

Je suis en train de réaliser ce qui suit:

1. Permettre au client d'effectuer la validation de base en utilisant des règles définies en appelant plugin de rules("add", options") pour jQuery validation (ce que xVal utilise pour obtenir des règles définies sur le côté serveur sur le modèle).

2. Si la validation client réussit, faire l'appel au serveur pour entrer les données de formulaire effectuant à nouveau la validation (sur les points qui ont été validés sur le client, ainsi que toute autre validation qui ne pouvait être effectuée dans le client ).

3. que le serveur retourne un objet JSON qui indiquent des erreurs qui pourraient avoir des domaines spécifiques, puis régler l'affichage d'erreur pour les champs.

J'ai mis en place les métadonnées pour le plug-in dans la page ASP.NET MVC par un appel à xVal de la manière suivante:

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

Cela se traduit par ce qui suit sur le côté 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>

Ce qui précède vraiment se traduit juste dans une série d'appels à rules("add", options) que le plug-in validateur jQuery puis processus.

Cependant lorsque vous essayez de poster ce formulaire via les formulaires jQuery, la validation ne se fait pas sur les valeurs du formulaire. La forme présente, mais les valeurs ne sont pas validées du tout.

Comment puis-je soumettre le formulaire en utilisant le plugin jQuery Form tout en étant validée par le plug-in de validation jQuery par un appel à ajax?

Answer 1

le plus important chose à surveiller lors de mettre tout cela ensemble est la petite partie de la documentation (qui est pas vraiment apparente dans la documentation xVal, qui fait abstraction de l'appel à rules("add", options) en l'appel à xVal.AttachValidator) pour rules("add", options) (Souligné par l'auteur):

  

Ajoute les règles spécifiées et retourne   toutes les règles pour la première correspondance   élément. IMPOSERAIENT parent   forme est validé, à savoir,   $ ( "Forme"). Valider () est appelée   d'abord.

Ceci est particulièrement important lorsque le plugin jQuery Form est en jeu, et que vous voulez soumettre le formulaire via AJAX, que vous devez mettre en place une option submitHandler dans l'appel à validate(options) , comme ceci:

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

En raison de la documentation citée ci-dessus en ce qui concerne les appels à rules("add", options), l'appel à validate(options) doit venir avant que les appels à rules("add", options) .

Si elles ne sont pas, le submitHandler est ignoré, jamais appelé.

En fin de compte, cela signifie que votre code côté client doit ressembler à ce mettre tous ensemble:

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

Enfin, avec tout cela câblé haut, la dernière chose à faire est ce qu'il faut faire quand la méthode retourne du côté serveur.

Vous voulez que le JSON qui est revenu de ces appels à quelque chose comme une coquille de viewmodel standardisée où vous avez le contenu spécifique de réponse enveloppé dans un morceau plus standardisé qui expose les informations dont vous avez besoin à travers des appels homogènes, quelque chose comme ceci:

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

Pour les erreurs sur le serveur, retour le même que ci-dessus, mais avec un emplacement qui a l'URL que l'utilisateur doit être redirigé vers le succès (ou null si elle n'a pas réussi) et une carte qui peut être passé directement la méthode showErrors(errors) s'il y a des erreurs sur les champs:

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

Etant donné que, success du paramètre options passé à ajaxSubmit doit être clair:

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

Tout ce qu'il fait est de vérifier pour voir si elle est définie la propriété newLocation. Si elle est définie, il redirige le document en cours à l'emplacement (qui généralement serait l'URL de la ressource nouvellement enregistrée).

Si ce n'est pas défini, il prend la carte et passe à showErrors sur le validateur retourné par un appel à validate(options), le réglage des messages d'erreur en utilisant le positionnement et le style spécifié par l'appel à validate(options).