javascript - validacion - ¿Cómo utilizar el complemento de validación de jQuery con metadatos, jQuery Forms y xVal juntos?

validar formulario javascript html5

Question

He estado haciendo algunos desarrollos utilizando el marco xVal para .NET para vincular algunas de las reglas de validación para modelos en el lado del servidor junto con alguna validación del lado del cliente mediante el complemento de validación jQuery junto con el complemento Formulario jQuery para enviar el formulario.

Sin embargo, estoy teniendo problemas para vincularlos a todos.

Estoy tratando de lograr lo siguiente:

1. Permita que el cliente realice una validación básica utilizando las reglas definidas por el rules("add", options") llamada rules("add", options") para la validación de jQuery (esto es lo que usa xVal para obtener reglas definidas en el lado del servidor en el modelo).

2. Si la validación del cliente es exitosa, realice la llamada al servidor para ingresar los datos del formulario que realizan la validación nuevamente (en los elementos que se validaron en el cliente, así como cualquier otra validación que no se pudo realizar en el cliente).

3. Haga que el servidor devuelva un objeto en JSON que indique cualquier error que pueda tener campos específicos y luego configure la visualización de error para los campos.

He configurado los metadatos para el complemento en la página MVC de ASP.NET a través de una llamada a xVal de la siguiente manera:

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

Esto se traduce en lo siguiente en el lado del cliente:

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

Lo anterior realmente se traduce en una serie de llamadas a rules("add", options) que luego procesa el complemento de validación jQuery.

Sin embargo, cuando se intenta publicar este formulario a través de los formularios jQuery, la validación no tiene lugar en los valores del formulario. El formulario se envía, pero los valores no se validan en absoluto.

¿Cómo puedo enviar el formulario utilizando el complemento jQuery Form mientras estoy siendo validado por el complemento jQuery Validation a través de una llamada a ajax ?

Answer 1

Lo más importante a tener en cuenta cuando se reúne todo esto es la pequeña pieza de documentación (que no es realmente evidente en la documentación de xVal, que resume la llamada a las rules("add", options) en la llamada a xVal.AttachValidator ) para rules("add", options) (el énfasis es mío):

Agrega las reglas especificadas y devuelve todas las reglas para el primer elemento coincidente. Requiere que el formulario padre esté validado, es decir, $ ("formulario"). Validate () se llama primero.

Esto es especialmente importante cuando el complemento jQuery Form entra en juego, y desea enviar el formulario a través de AJAX, ya que tiene que configurar una opción submitHandler en la llamada para validate(options) , así:

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

Debido a la documentación citada anteriormente con respecto a las llamadas a rules("add", options) , la llamada a validate(options) debe venir antes que las llamadas a rules("add", options) .

Si no lo hacen, entonces el submitHandler se ignora, nunca se llama.

Al final, esto significa que el código del lado del cliente tiene que verse así cuando se pone todo junto:

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

Finalmente, con todo esto conectado, lo último que hay que hacer es qué hacer cuando el método del lado del servidor vuelve.

Querrá que el JSON que se devuelve de estas llamadas sea algo así como un shell de viewmodel estandarizado donde tiene el contenido específico de la respuesta envuelto en una pieza más estandarizada que expone la información que necesita a través de llamadas homogéneas, algo como esto:

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

Para los errores en el servidor, devuelva lo mismo que arriba, pero con una ubicación que tenga la URL a la que el usuario debería redirigirse en caso de éxito (o nulo si no tuvo éxito) y un mapa que se puede pasar directamente a showErrors(errors) Método showErrors(errors) si hay errores en los campos:

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

Dado que, el campo de success del parámetro de options pasado a ajaxSubmit debe ser claro:

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

Todo lo que hace es verificar si la propiedad newLocation está definida. Si está definido, entonces redirige el documento actual a la ubicación (que normalmente sería la URL del recurso recién guardado).

Si no está definido, toma el mapa y lo pasa a showErrors en el validador devuelto por una llamada para validate(options) , configurando los mensajes de error utilizando el posicionamiento y el estilo especificado por la llamada para validate(options) .