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

我创建了一个简单的例子.它只是为您提供一个开始,您仍然需要根据您的需要修改此代码.此示例使用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或按键

取消按键

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