10

我正在使用带有 JQuery 的 MVC4，并且我有一个使用 @Ajax.BeginForm 创建的表单。它具有必填字段（在其视图模型上设置）。我正在尝试在提交回表单之前对其进行验证；但是，它似乎没有验证。

我最初有一个提交按钮，它只是提交表单。我将提交按钮更改为常规按钮并尝试调用 $('#formname').validate() 但它始终返回 true（即使未填写必填字段）。其他视图似乎工作正常（不使用 Ajax.BeginForm）。

我正在引用 jquery、jquery-ui、jquery.validate、jquery.validate.unobtrusive 和 jquery.unobtrusive-ajax。

有人对我缺少什么有任何想法/建议吗？

编辑 - - - - - - - - - - - - - - - - - - - - - - - - - --------------------------

下面是我的代码（这是在引用 jquery 脚本的母版页内）：

@model AimOnlineMRA.Models.Reports.DateRangeViewModel 

@using (Ajax.BeginForm("GetReport", "Reports", new AjaxOptions
{
    UpdateTargetId = "report_pane", HttpMethod = "Post"}, new {@id="parameterForm"}))
{
    @Html.AntiForgeryToken()

<script type="text/javascript">
    $(document).ready(function () {
        ApplyTheme();

        $('#btnYes').click(function() {
            $('#RunSpecificDateRange').val('true');

            $('#yesNo').hide();
            $('#dateRangeForm').show();
        });

        $('#btnCancel').click(function () {
            $('#report_pane').html('').hide();
        });

        $('#btnOk').click(function () {
            //if ($('#parameterForm').valid()) {
            //    alert('valid');
            //} else {
            //    alert('invalid');
            //}
        });

        $('#dateRangeForm').hide();

        $('#BeginDate').datepicker({
            showOn: 'button',
            buttonText: 'Date Picker',
            buttonImageOnly: true,
            buttonImage: '@Url.Content("~/Content/Icons/calendar-icon.png")'
        });

        $('#EndDate').datepicker({
            showOn: 'button',
            buttonText: 'Date Picker',
            buttonImageOnly: true,
            buttonImage: '@Url.Content("~/Content/Icons/calendar-icon.png")'
        });
    });
</script>

<div class="margin-auto" style="width: 400px">

    <div id="yesNo">
        <span class="bold">Do you want to run this report for a specific date range?</span> 
        <br /><br />
        @Html.Button("Yes", "btnYes")
        @Html.Button("No", "btnNo")
    </div>
    <div id="dateRangeForm">
        <span class="bold">Date Range</span> 
        <br /><br />
        <div class="left">
            <div class="left clear-both">
                @Html.LabelFor(x => x.BeginDate) <br />
                @Html.TextBoxFor(x => x.BeginDate, new {@style="vertical-align:top"})
                @Html.ValidationMessageFor(x => x.BeginDate)
            </div>
            <div class="left clear-both m-top-5">
                @Html.LabelFor(x => x.EndDate) <br />
                @Html.TextBoxFor(x => x.EndDate, new {@style="vertical-align:top"})
                @Html.ValidationMessageFor(x => x.EndDate)
            </div>
        </div>
        <div class="left m-left-10">

        </div>
        <div class="left clear-both m-top-10">
            @Html.Button("Ok", "btnOk")
            @Html.Button("Cancel", "btnCancel")
        </div>
    </div>
</div>
}

- - - - - - - - -解析度 - - - - - - - - - - - - - - -

在解决问题$.validator.unobtrusive.parse($('#parameterForm'));之前打电话$('#parameterForm').valid();

4

5 回答 5

29

尝试

$.validator.unobtrusive.parse($('#parameterForm'))

打电话之前

$('#parameterForm').valid()

于 2013-07-26T13:18:54.830 回答
10

问题已经有一个公认的答案，但对于将来发现这个问题的任何人来说，这是另一个可能的原因......

确保表单中的第一个经过验证的元素具有name属性，如下所示：

<input type=text required name='blah' />

我花了 2 个小时追踪同样的问题，我发现如果表单中第一个经过验证的元素有一个name属性，那么一切都会按您的预期进行（也就是说，.valid()如果表单无效，将返回 false）。其他经过验证的元素是否具有名称属性似乎没有区别。

在普通表单中，您肯定需要名称属性，因为这是将数据提交到服务器时使用的属性。但是在更现代的环境中，例如使用 Knockout 的环境中，没有理由name在输入元素上使用属性，因为数据绑定可以使您的数据模型保持更新。

于 2014-03-14T01:45:15.973 回答
1

<input>您是否在or的 HTML 标记中添加了 required <textarea>？

IE：

<input id="cemail" type="email" name="email" required/>
于 2013-07-26T12:52:44.827 回答
0

对于 Google 员工 - 当您的 MVC 路由中没有正确的绑定属性时，也会发生这种情况。例如，如果您发布的表单元素中的 aname不在包含列表中，您可能会收到错误消息。

// make sure the list matches your form elements. 
public ActionResult Edit([Bind(Include = "Username,FullName,Email")] User user)

确保您的表单名称与包含列表中的名称匹配，或者一起删除绑定属性（如果您不介意牺牲安全性）。

于 2019-01-24T16:58:31.800 回答
-3

我引用了这两个文件：

  • jquery.validate.js
  • jquery.validate.unobtrusive.js <--删除这个引用！

删除对j​​query.validate.unobtrusive.js的引用，为我修复了它

希望这可以帮助某人

于 2014-05-21T18:15:06.440 回答