Untitled

MVC3 validation failing when trying to add ajax post function
<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>

$("#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");
            }

        });

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

$('#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");
    }
});