使用 jQuery 提交 MVC Razor 后验证所有表单字段

Question

我在我的 MVC 应用程序中使用 jquery 验证，在选择并离开输入后，它会自动验证。另一方面，如果用户没有选择输入，即使提交表单也不会被验证。因此，我想在按下 MVC Razor 页面上的提交按钮后验证所有相关字段。我该怎么做？

Answer 1

我创建了一个简单的示例。这只是给您一个开始，您仍然需要根据需要修改此代码。此示例使用 jquery 表单验证。

型号

  public class Vehicle
    {
        public int Id { get; set; }
        public string Make { get; set; }
        public string Model { get; set; }
    }

控制器和动作

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

查看

@model JqueryValidationDemo.Models.Vehicle

@{
    ViewBag.Title = "Jquery Form Validation Demo";
}
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script>
    $(document).ready(function () {
            $('#myform').validate({ // initialize the plugin
                rules: {
                    Make: {
                        required: true,
                        minlength: 2
                    },
                    Model: { required: true }
                },
                messages: {
                    Make: {
                        required: "Make is required!",
                        minlength: "Make Name at least 2 characters long!"
                    },
                    Model: {
                        required: "Modl is required!"
                    }
                },
                submitHandler:
                    $("#myform").on('submit', function () {
                        if ($("#myform").valid()) {
                            //Do something here
                            alert("Validation passed");
                        }
                        return false;
                    })
            })
    });
</script>

@using (Html.BeginForm("Index", "Home", FormMethod.Get, new { @id = "myform" }))
{
    <fieldset>
        <legend>Vehicle</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Make)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Make)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Model)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Model)
        </div>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
}

注意：小心你的 jquery 引用，你不需要使用 jquery.validate.unobtrusive.js。

希望它能给你一个好的开始。

更新： 删除 keyup 或 keypress

移除按键

$("#youElementId").bind('keypress', function (e) {
    if (e.keyCode == 13) {
        return false;
    }
    return true;
});