在发布到控制器之前验证表格。然后重定向到另一个动作。 （jQuery 验证插件）

Question

我想在表单发布到我的控制器之前对其进行验证，然后重定向到另一个操作。我需要帮助，因为我不熟悉执行此操作的语法。应用程序当前验证但自动重定向到“/Rxcard/Search”。我只需要它在通过验证后重定向。

表格：

@model RxCard.Models.AccountDetail
<div class="details-full" style="left: 0px; right: 0px;">
    <div class="page">
        <div>
            @Html.Partial("_Nav")
        </div>
        <section class=" main-content acct-list">
            <form id="Fields" method="post">
                <label typeof="label">ADD NEW CLINIC</label>

                <input id="chkIsActive" type="hidden" name="chkIsActive" value="@Model.Pharmacy.IsActive" @(Model.Pharmacy.IsActive == "true" ? "checked=\"checked\"" : "") />
                <input type="hidden" name="AccountID" id="AccountID" value="@Model.Pharmacy.AccountID" />

                <div class="fieldcontainer">
                    <label>Clinic Name</label>
                    <input id="editAccountName" name="editAccountName" class="accountEdit" type="text" value="@Model.Pharmacy.AccountName" />
                </div>

                <div class="fieldcontainer">
                    <label>Address</label>
                    <input id="editAddress" name="editAddress" class="accountEdit" type="text" value="@Model.Pharmacy.Address" />
                </div>

                <div class="fieldcontainer">
                    <label>City</label>
                    <input id="editCity" name="editCity" class="accountEdit" type="text" value="@Model.Pharmacy.City" />
                </div>

                <div class="fieldcontainer">
                    <label>State</label>
                    <input id="editState" name="editState" class="accountEdit" type="text" value="@Model.Pharmacy.State" />
                </div>

                <div class="fieldcontainer">
                    <label>Zip</label>
                    <input id="editZip" name="editZip" class="accountEdit" type="text" value="@Model.Pharmacy.ZipCode" />
                </div>

                <div class="fieldcontainer">
                    <label>Phone Number (optional)</label>
                    <input id="editArea" maxlength="3" onkeyup="tabout(this,'editPrefix')" name="editArea" style="float:left; width:60px;" type="text" value="@Model.Pharmacy.Area" depends />
                    <input id="editPrefix" maxlength="3" onkeyup="tabout(this,'editSuffix')" name="editPrefix" style="float:left; width:60px;" type="text" value="@Model.Pharmacy.Prefix" depends />
                    <input id="editSuffix" maxlength="4" onkeyup="tabout(this,'editPrefix')" name="editSuffix" style="float:left; width:60px;" type="text" value="@Model.Pharmacy.Suffix" depends />
                </div>
                <div>
                    <input id="cancelAccount" name="cancelAccount" type="button" value="Cancel" onclick="window.location.href='/rxcard/search'" />
                    <input id="saveAccount" name="saveAccount" type="submit" value="Save" />
                </div>

            </form>
        </section>
    </div>
</div>

验证：

$(document).ready(function () {
    $("#Fields").validate({
        errorElem: 'div',
        rules: {
            editAccountName: {
                required: true
            },
            editAddress: {
                required: true
            },
            editCity: {
                required: true
            },
            editState: {
                required: true,
                stateregex: /^([^0-9]*)$/,
                maxlength: 2
            },
            editZip: {
                required: true,
                zipregex: /^([^A-Za-z]*)$/,
            },
            editArea: {
                required: false,
                minlength: 3,
                digits: true
            },
            editPrefix: {
                required: function (element) {
                    return $("#editArea").val() != "";
                },
                minlength: 3,
                digits: true
            },
            editSuffix: {
                required: function (element) {
                    return $("#editPrefix").val() != "";
                },
                digits: true,
                minlength: 4
            }

        },
        messages: {
            editAccountName: {
                required: "Enter the account name."

            },
            editAddress: {
                required: "Enter the address."
            },
            editCity: {
                required: "Enter a City."
            },
            editState: {
                required: "Enter a State.",
                maxlength: "Enter only two characters",
            },
            editZip: {
                required: "Enter a zip code"
            },
            editArea: {
                required: "Please enter a complete area code",
                minlength: "Please enter 3 digits for the area code",
                digits: "Phone number must only contain numbers"
            },
            editPrefix: {
                required: "Please enter a complete prefix",
                minlength: "Please enter 3 digits for the prefix",
                digits: "Phone number must only contain numbers"
            },
            editSuffix: {
                required: "Please enter a complete suffix",
                minlength: "Please enter valid 10 digit phone number",
                digits: "Phone number must only contain numbers"
            }

        }

    })

    $("#saveAccount").click(function (e) {

            $.post("/RxCard/SaveAccount",
           {
               IsActive: true,
               AccountId: $("#AccountID").val(),
               AccountName: $("#editAccountName").val(),
               Address: $("#editAddress").val(),
               City: $("#editCity").val(),
               State: $("#editState").val(),
               ZipCode: $("#editZip").val(),
               Area: $("#editArea").val(),
               Prefix: $("#editPrefix").val(),
               Suffix: $("#editSuffix").val()
           });

        window.location.href = "/RxCard/Search";
    });



    //validators for regular expressions
    $.validator.addMethod("stateregex", function (value, element, regexpr) {
        return regexpr.test(value);
    }, "State must contain no numbers.");
    $.validator.addMethod("zipregex", function (value, element, regexpr) {
        return regexpr.test(value);
    }, "State must contain only numbers.");
});

控制器：

[ValidateRequest]
        [HttpPost]
        public ActionResult SaveAccount(string AccountId,string IsActive,string AccountName, string Address, string City, string State, string ZipCode, int Area, int Prefix, int Suffix)
        {
            var isactive = Convert.ToBoolean(IsActive) ? 1 : 0;
            var PhoneNumber = Area.ToString() + Prefix.ToString() + Suffix.ToString();


            using (OdbcConnection _conn = new OdbcConnection("FILEDSN=c:\\datasources\\RxCard.dsn"))
            using (OdbcCommand cmd1 = new OdbcCommand())
            {
                cmd1.Connection = _conn;
                cmd1.CommandText = "{call web.Maint_UpdateClinic(?,?,?,?,?,?,?,?,?,?)}";
                cmd1.Parameters.AddWithValue("@AccountID", AccountId);
                cmd1.Parameters.AddWithValue("@IsActive", isactive);
                cmd1.Parameters.AddWithValue("@AccountName", AccountName);
                cmd1.Parameters.AddWithValue("@AccountAddress", Address);
                cmd1.Parameters.AddWithValue("@City", City);
                cmd1.Parameters.AddWithValue("@State", State);
                cmd1.Parameters.AddWithValue("@ZipCode", ZipCode);
                cmd1.Parameters.AddWithValue("@AreaCode", Area);
                cmd1.Parameters.AddWithValue("@PhoneNumber", PhoneNumber);
                cmd1.Parameters.AddWithValue("@WebID", CookieStore.GetCookie("WebId"));

                cmd1.CommandType = CommandType.StoredProcedure;
                _conn.Open();
                cmd1.ExecuteNonQuery();
                _conn.Close();
            }
            //Response.Redirect("~/rxcard/search");
            return null;
        }

Answer 1

首先我没有得到这条线

   window.location.href = "/RxCard/Search";

为什么你要在 saveAccount 中这样重定向。

这样定义你的表单

@using (Html.BeginForm("SaveAccount", "Account", FormMethod.Post, new { id = "frmFields", @autocomplete = "off" }))
{}

然后从表单中删除提交按钮，并将其作为表单外的普通按钮，并在jquery中编写点击事件

在 Click 事件中强制验证表单的真实性，然后重定向到您的方法 例如尝试这样：

$('body').on('click', '#btnSaveAccount', function (e) {
$.validator.unobtrusive.parse($('#frmFields'));
var $valid = $("#frmFields").valid();
if (!$valid) {
      $validator.focusInvalid();
       return false;
  }
 else {
      SaveAccount();
      return true;
   }
});

Answer 2

您需要先确认表单是否有效，使用以下代码。

  $("#saveAccount").click(function (e) {

  var isValid = $('nameOfYourForm').valid();

    if(isValid) {

            $.post("/RxCard/SaveAccount",
       {
           IsActive: true,
           AccountId: $("#AccountID").val(),
           AccountName: $("#editAccountName").val(),
           Address: $("#editAddress").val(),
           City: $("#editCity").val(),
           State: $("#editState").val(),
           ZipCode: $("#editZip").val(),
           Area: $("#editArea").val(),
           Prefix: $("#editPrefix").val(),
           Suffix: $("#editSuffix").val()
       });

    window.location.href = "/RxCard/Search";
   }


});