Question

我正在使用带有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();

Answer 1

尝试

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

之前打电话

$('#parameterForm').valid()

Answer 2

问题已经有了一个可接受的答案，但这是另一个可能的原因让任何人在将来发现这个......

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

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

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

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

Answer 3

您是否已将所需内容添加到<input>或<textarea>？

的HTML标记中

IE：

<input id="cemail" type="email" name="email" required/>

Answer 4

对于Google员工-当您的MVC路线中没有正确的Bind Attributes时，也会发生这种情况。例如，如果您发布的表单元素的name不在“包括”列表中，则可能会出现错误。

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

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

Answer 5

我正在引用这两个文件：

jquery.validate.js
jquery.validate.unobstrusive.js ＆lt; - 删除此引用！

删除对 jquery.validate.unobstrusive.js 的引用，为我修复了

希望这有助于某人

jquery验证总是返回true

5 个答案: