Как использовать плагин валидации jQuery с метаданными, формами jQuery и xval вместе?

Question

Я делаю некоторую разработку, используя xval Framework для .NET, чтобы связать некоторые правила проверки для моделей на стороне сервера, а также некоторая проверка на стороне клиента, используя Плагин валидации jQuery вместе с плагин jquery form для отправки формы.

Тем не менее, у меня проблемы с связыванием их всех вместе.

Я пытаюсь достичь следующего:

1. Разрешить клиенту выполнять базовую проверку, используя правила, определяемые при вызове rules("add", options") Плагин для проверки jQuery (это то, что XVAL использует для получения правил, определенных на стороне сервера на модели).

2. Если проверка клиента успешна, сделайте вызов на сервер, чтобы ввести данные формы, выполняющие проверку снова (на элементах, которые были проверены на клиенте, а также любую другую проверку, которая не может быть выполнена в клиенте).

3. Попросите сервера вернуть объект в JSON, который указывает на любые ошибки, которые могут иметь определенные поля, а затем установите отображение ошибки для полей.

Я настроил метаданные для плагина на странице ASP.NET MVC с помощью вызова XVAL следующим образом:

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

Это переводится на следующее на стороне клиента:

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

Вышеуказанное действительно просто переводится в серию вызовов в rules("add", options) который затем обрабатывает плагин jQuery Validator.

Однако при попытке опубликовать эту форму через формы jQuery, проверка не происходит на значениях формы. Форма подчиняется, но значения вообще не подтверждены.

Как я могу отправить форму, используя плагин формы jQuery, будучи проверенным плагином проверки jQuery с помощью вызова к ajax?

Answer 1

А самое важное На что можно обратить внимание на все это вместе, - это маленькая часть документации (которая на самом деле не очевидна в документации для XVAL, которая абстрагирует призыв к rules("add", options) в призыве к xVal.AttachValidator) за rules("add", options) (акцент мой):

Добавляет указанные правила и возвращает все правила для первого соответствующего элемента. Требует, чтобы родительская форма была проверена, то есть $ ("form"). Validate () называется первым.

Это особенно важно, когда плагин формы jQuery вступает в игру, и вы хотите отправить форму через Ajax, так как вам нужно настроить submitHandler вариант при вызове validate(options), вот так:

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

Из -за документации, указанной выше, в отношении звонков rules("add", options), призыв к validate(options) Должен прийти к призыву к rules("add", options).

Если они этого не делают, то субмитандлер игнорируется, никогда не называется.

В конце концов, это означает, что код вашей клиентской стороны должен выглядеть так, когда собираете все это вместе:

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

Наконец, со всем этим подключенным, последнее, что нужно сделать, это то, что делать, когда метод на стороне сервера возвращается.

Вам понадобится JSON, который возвращался из этих вызовов, чтобы быть чем-то вроде стандартизированной оболочки ViewModel, где у вас есть контент для конкретного ответа, завернутый в более стандартизированную часть, которая раскрывает необходимую вам информацию для однородных вызовов, что-то вроде этого:

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

Для ошибок на сервере верните то же самое, что и с местом, в котором есть URL -адрес, на который пользователь должен быть перенаправлен на успех (или NULL, если он не был успешным), и карта, которую можно передавать непосредственно к showErrors(errors) Метод, если на полях есть ошибки:

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

Учитывая это, success поле options параметр передано ajaxSubmit должно быть ясно:

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

Все, что он делает, это проверить, если newLocation свойство определено. Если это определено, то он перенаправляет текущий документ в местоположение (который обычно будет URL -адресом недавно сохраненного ресурса).

Если это не определено, то он берет карту и передает ее showErrors на валидаторе, возвращенном при вызове validate(options), установление сообщений об ошибках, используя позиционирование и стиль, указанные по вызову на validate(options).