使用BeginForm帮助程序时启动客户端验证

时间:2013-05-21 13:48:54

标签: jquery asp.net-mvc-3 razor

我正在开发一个asp.net mvc 3应用程序,我的问题是让我不引人注目的JS验证工作。我问过非常相似的问题,但由于我没有得到任何答案,但认为我设法更好地定义我的问题,我现在写这个问题。

搜索如何使客户端验证工作的答案我看到必须有一些代码附加到提交按钮的click事件,这将启动验证过程。我不是百分之百确定这是如此,这实际上是我的问题,但如果我是正确的,你可以帮我解决我需要添加的JS,这样可以触发验证过程。

这是我的表格:

@using (Html.BeginForm("RecieveDataFromDocument", "Forms", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <table border="1">
        <colgroup>
            <col span="1" style="width: 10%;" />
            <col span="1" style="width: 40%;" />
            <col span="1" style="width: 25%;" />
            <col span="1" style="width: 25%;" />
        </colgroup>
        @Html.Partial("_PartialHeader", Model)
        @Html.Partial("_PartialDrawing", Model)
        @Html.Partial("_PartialBody", Model)
        @Html.Partial("_PartialFooter", Model)
    </table>
    if (ViewBag.Status == 1)
    {
        <button type="submit" id="submitDocument">Save</button>   
    }
    else
    { 
        @Html.ActionLink("Back", "Index")
    }
}

并且在同一视图的底部我有这个JS:

<div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#submitDocument').click(function () {
            window.alert('Hi');
            var test = ($("form").valid());
            window.alert('bye');
        })
    });
</script>
</div>

从我测试到现在,我可以看到Hi消息,但即使我发表评论,我也永远不会得到bye。所以任何帮助都会受到赞赏。

P.S

我已将其包含在我的_Layout页面中:

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/plugins/jqGrid/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/PageHelpers/jqDateTimePicker.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>

我尝试明确地包括那些:

 <script src="@Url.Content("~/Scripts/plugins/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/plugins/jquery.validate.js")" type="text/javascript"></script>

在我看来。因此,通过这种设置,它无法正常工作。

3 个答案:

答案 0 :(得分:2)

您需要在页面上包含jQuery和jQuery Validate插件脚本。

如果您还包含ASP.Net MVC不显眼的验证脚本,一切都会自动发生。

编辑:您需要在 jQuery Validate之后包含不显眼的验证脚本,否则自动设置将无效。

答案 1 :(得分:1)

<div>
<script type="text/javascript">
$(document).ready(function () {
    $('#submitDocument').click(function () {
        window.alert('Hi');
        var test = ($("#Forms").valid()); //Here code modified.
        window.alert('bye');
    })
});

答案 2 :(得分:1)

@SLaks是正确的,在页面的head部分包含必要的js文件,并使用浏览器中包含的开发人员工具(IE,Chrome或Safari)检查js控制台是否出现问题。

如果要为表单使用ID,请将打开表单命令更改为

@using(Html.BeginForm(“RecieveDataFromDocument”,“Forms”,FormMethod.Post)) {

}

并将方法valid()更正为validate()