Como usar o plug -in de validação do jQuery com metadados, formulários jQuery e XVAL juntos?

Question

Eu tenho feito algum desenvolvimento usando o xval estrutura para .NET para vincular algumas das regras de validação para modelos no lado do servidor, juntamente com alguma validação do lado do cliente usando o plugin de validação do jQuery juntamente com o plug -in de formulário jQuery para enviar o formulário.

No entanto, estou tendo problemas para vincular todos eles.

Estou tentando alcançar o seguinte:

1. Permita que o cliente execute a validação básica usando regras definidas pela chamada rules("add", options") O plug -in para validação do jQuery (é isso que o XVAL usa para obter regras definidas no lado do servidor no modelo).

2. Se a validação do cliente for bem -sucedida, faça a chamada para o servidor para inserir os dados do formulário que executam a validação novamente (em itens que foram validados no cliente, bem como qualquer outra validação que não pudesse ser executada no cliente).

3. Peça ao servidor retornar um objeto no JSON que indique quaisquer erros que possam ter campos específicos e, em seguida, defina a exibição de erros para os campos.

Eu configurei os metadados para o plug -in na página ASP.NET MVC através de uma chamada para XVAL da seguinte maneira:

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

Isso se traduz no seguinte do lado do 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>

O exposto acima realmente se traduz em uma série de chamadas para rules("add", options) que o plug -in do validador jQuery então processa.

No entanto, ao tentar postar esse formulário por meio de formulários de jQuery, a validação não ocorre nos valores do formulário. O formulário envia, mas os valores não são validados.

Como posso enviar o formulário usando o plug -in do formulário jQuery enquanto é validado pelo plug -in de validação do jQuery através de uma chamada para ajax?

Answer 1

o mais importante A coisa a procurar ao montar tudo isso é o pequeno pedaço de documentação (que não é realmente aparente na documentação para XVAL, que abstrairá a chamada para rules("add", options) na chamada para xVal.AttachValidator) por rules("add", options) (ênfase meu):

Adiciona as regras especificadas e retorna todas as regras para o primeiro elemento correspondente. Requer que o formulário pai seja validado, ou seja, $ ("formulário"). O validate () é chamado primeiro.

Isso é especialmente importante quando o plug -in do formulário jQuery entra em jogo, e você deseja enviar o formulário via Ajax, pois você precisa configurar um submitHandler opção na chamada para validate(options), igual a:

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

Por causa da documentação citada acima em relação às chamadas para rules("add", options), a chamada para validate(options) deve vir antes das ligações para rules("add", options).

Se não o fizerem, o submithandler é ignorado, nunca chamado.

No final, isso significa que o código do lado do seu cliente deve ficar assim ao montar tudo:

<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, com tudo isso conectado, a última coisa a fazer é o que fazer quando o método do lado do servidor retornar.

Você vai querer o JSON que retornou dessas chamadas para ser algo como um shell ViewModel padronizado, onde você tem o conteúdo específico da resposta envolto em uma peça mais padronizada que expõe as informações necessárias em chamadas homogêneas, algo assim:

{
    // 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 os erros no servidor, retorne o mesmo que acima, mas com um local que possui o URL para o qual o usuário deve ser redirecionado no sucesso (ou nulo se não tiver sido bem -sucedido) e um mapa que pode ser passado diretamente para o showErrors(errors) Método Se houver erros nos 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 isso, o success campo do options parâmetro passado para ajaxSubmit deve 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);
}

Tudo o que faz é verificar se o newLocation A propriedade é definida. Se for definido, redirecionar o documento atual para o local (que normalmente seria o URL do recurso recém -salvo).

Se não estiver definido, leva o mapa e passa para showErrors no validador devolvido por uma chamada para validate(options), definindo as mensagens de erro usando o posicionamento e o estilo especificado pela chamada para validate(options).