MVC3客户端验证不能与Ajax.BeginForm形式工作 [英] MVC3 Client Side Validation not working with an Ajax.BeginForm form

问题描述

我有一个局部视图以下形式

I have the following form in a partial view

@model PartDetail
@using (Ajax.BeginForm("Create", "Part", null, new AjaxOptions { UpdateTargetId =       "update_panel"}))
{
    <h3>New @Model.PartType</h3>
    <p> Serial Number: 
        <strong>
            @Html.EditorFor(model => model.SerialNumber)
            @Html.ValidationMessageFor(model => model.SerialNumber)
        </strong>
    </p>
    <p> Name: 
        <strong>
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </strong>
    </p>
    ...... more relatively boiler plate code here......
    <p>
        <input type="submit" class="btn primary" value="Save Part"/>
    </p>
}

通过模型

public class PartDetail
{
    public string DateCreated { get; set; }
    [StringLength(255, MinimumLength = 3)]
    public string Description { get; set; }
    public Guid ID { get; set; }
    public string IsActive { get; set; }
    public string Manufacturer { get; set; }
    public IEnumerable<SelectListItem> Manufacturers { get; set; }
    [StringLength(100, MinimumLength = 3)]
    public string Name { get; set; }
    public string PartType { get; set; }
    [Required]
    [StringLength(100, MinimumLength = 3)]
    public string SerialNumber { get; set; }
}

和我引用（在我的局部视图的父视图）

And I reference (in parent views of my partial view)

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

和没有得到确认。如果我没有输入到序列号文本框和preSS提交其保存到没有问题的数据库。

And nothing gets validated. If I type nothing into the Serial Number text box and press submit it saves it to the database with no problems.

推荐答案

尝试添加一个 OnBegin 回调至AjaxOptions，这应该工作。

Try adding an OnBegin callback to the AjaxOptions and this should work.

function validateForm() { 
   return $('form').validate().form(); 
} 

@using (Ajax.BeginForm("Create", "Part", null, new AjaxOptions { UpdateTargetId = "update_panel", OnBegin = "validateForm" }))
...

如果这不会为你工作，一个替代解决方案可能提交使用jQuery的形式。这将是我的preferred解决方案。

If this doesn't work for you, an alternative solution may be to submit the form using jQuery. This would be my preferred solution.

<div id="result"></div> 

@using (Html.BeginForm()) 
{ 
<h3>New @Model.PartType</h3>
<p>Serial Number: 
    <strong>
        @Html.EditorFor(model => model.SerialNumber)
        @Html.ValidationMessageFor(model => model.SerialNumber)
        </strong>
    </p>
    <p> Name: 
        <strong>
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </strong>
    </p>
    ...... more relatively boiler plate code here......
    <p>
        <input type="submit" class="btn primary" value="Save Part"/>
    </p>

    }

的jQuery / JS函数来提交表单

    $(function () { 
        $('form').submit(function () { 

        $.validator.unobtrusive.parse($('form'));  //added

            if ($(this).valid()) { 
                $.ajax({ 
                    url: this.action, 
                    type: this.method, 
                    data: $(this).serialize(), 
                    success: function (result) { 
                        $('#result').html(result); 
                    } 
                }); 
            } 
            return false; 
        }); 
    });

这篇关于MVC3客户端验证不能与Ajax.BeginForm形式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！