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>

如果我将此添加到我的视图中。验证始终返回true。我的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，除非您用例如AJAX调用的新表单更新DOM。在这种情况下，一旦将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");
    }
});

尝试添加ajax post函数时，MVC3验证失败

1 个答案: