Проверка MVC3 не удалась при попытке добавить функцию записи ajax

Question

У меня проблемы с проверкой с помощью jquery для отправки данных форм на контроллер.

Этот код работает, и проверка проходит нормально, если я не использую jquery для создания поста.

<div id="window">
@using (Html.RequiredFieldsMessage()){}
@using (Html.BeginForm("","",FormMethod.Post,new{id="card-payment"}))
{
    @Html.ValidationSummary(true, "Please fix the errors below.")
    <div class="inputForm no-border">
        <div class="fr">
            @Html.LabelFor(model => model.DpsPaymentModel.CardHolderName)
            @Html.EditorFor(model => model.DpsPaymentModel.CardHolderName)
            @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.CardHolderName, false)
          </div>
        <div class="fr">
            @Html.LabelFor(model => model.DpsPaymentModel.CardNumber)
            @Html.EditorFor(model => model.DpsPaymentModel.CardNumber)
            @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.CardNumber, false)
        </div>
        <div class="fr">
            @Html.LabelFor(model => model.DpsPaymentModel.DateExpiry)
            @Html.EditorFor(model => model.DpsPaymentModel.DateExpiry)
            @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.DateExpiry, false)
        </div>
        <div class="fr">
            @Html.LabelFor(model => model.DpsPaymentModel.Cvc2)
            @Html.EditorFor(model => model.DpsPaymentModel.Cvc2)
            @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.Cvc2, false)
        </div>
        <div class="fr">
            @Html.LabelFor(model => model.DpsPaymentModel.Amount)
            @Html.EditorFor(model => model.DpsPaymentModel.Amount)
            @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.Amount, false)
        </div>
        <div class="fr">
            <button type="submit" id="process-payment">Submit</button>
        </div>
    </div>

}
</div>

Если я добавлю это к своему мнению. Проверка всегда возвращается как истина. Мой HTML-файл не находится в частичном представлении в том же представлении, которое загружает правильные сценарии проверки JQuery.

  $("#process-payment").click(function () {
            event.preventDefault();
            var form = $("#card-payment");
            $.validator.unobtrusive.parse(form);
            if (form.validate()) {
                console.log("valid");
                $.ajax({
                    url: '/payment/processcardpayment',
                    type: "POST",
                    data: form.serialize(),
                    success: function (data) {
                        console.log(data);

                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                    },
                    complete: function () {
                        //       $("#ProgressDialog").dialog("close");
                    }
                });
            } else {
                console.log("invalid");
            }

        });

Answer 1

Вы вызываете event.preventDefault(); в вашем обработчике кликов, но нигде не определена переменная event, так что, я думаю, вы получите ошибку javascipt. Кстати, вы смотрели на консоль вашего инструмента отладки JavaScript?

Может быть, вы хотели, чтобы ваш обработчик кликов воспринимал это как аргумент:

$("#process-payment").click(function (evt) {
    evt.preventDefault();
    ...
});

Но я бы порекомендовал вам подписаться на событие отправки формы, а не на обработчик нажатия кнопки отправки. Это будет, например, учитывать тот случай, когда пользователь нажимает Enter, когда внутри какого-либо поля ввода, чтобы отправить форму, вместо нажатия на кнопку отправки.

Также правильный способ проверки правильности формы - form.valid(), а не form.validate(), как в вашем примере. В дополнение к этому вам не нужно вызывать $.validator.unobtrusive.parse, если вы не обновляете DOM с помощью новая форма, скажем, например, вызов AJAX. В этом случае вы должны вызывать это в обратном вызове успеха после того, как вы заменили DOM новыми элементами формы, чтобы проанализировать новые ненавязчивые правила проверки.

Итак:

$('#card-payment').submit(function(evt) {
    evt.preventDefault();
    var form = $(this);
    if (form.valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: form.serialize(),
            success: function (result) {
                console.log(result);
            },
            error: function (jqXhr, textStatus, errorThrown) {
                alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
            },
            complete: function () {
                // $("#ProgressDialog").dialog("close");
            }
        });
    } else {
        console.log("invalid");
    }
});