MVC4验证在提交后发生

时间:2013-12-11 10:40:06

标签: jquery asp.net-mvc-4 jquery-validate unobtrusive-javascript

我的MVC4应用程序存在一些问题 - 表单验证仅在提交后才会发生。

我希望在提交之前验证表单。 这是我观点的(部分)

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();
    <fieldset>
    <legend>Offer</legend>
    <div class="editor-label">
        @Html.LabelFor(model => model.HotelName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.HotelName)
        @Html.ValidationMessageFor(model => model.HotelName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.LocationName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.LocationName)
        @Html.ValidationMessageFor(model => model.LocationName)
     </div>

我也有我的web.config

    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

这些是我页面中包含的所有脚本

    <script type="text/javascript" length="7" src="/Scripts/jquery/jquery-2.0.3.js?cdv=1">
    <script type="text/javascript" length="7" src="/Scripts/jquery/jquery-2.0.3.min.js?cdv=1">
    <script type="text/javascript" length="7" src="/Scripts/jquery/jquery.cookies.js?cdv=1">
    <script type="text/javascript" length="7" src="/Scripts/language.js?cdv=1">
    <script type="text/javascript" src="/Scripts/jqueryval/jquery.validate.js?cdv=1">
    <script type="text/javascript" src="/Scripts/jqueryval/jquery.validate.min.js?cdv=1">
    <script type="text/javascript" src="/Scripts/jqueryval/jquery.validate.unobtrusive.js?cdv=1">
    <script type="text/javascript" src="/Scripts/jqueryval/jquery.validate.unobtrusive.min.js?cdv=1">
    <script type="text/javascript" src="/Scripts/jquery-ui/jquery-ui-1.10.3.js?cdv=1">
    <script type="text/javascript" src="/Scripts/jquery-ui/jquery-ui-1.10.3.min.js?cdv=1">
    <script type="text/javascript" src="/Scripts/file-upload/jquery.fileupload.js?cdv=1">
    <script type="text/javascript" src="/Scripts/file-upload/jquery.fileupload-process.js?cdv=1">
    <script type="text/javascript" src="/Scripts/file-upload/jquery.fileupload-main.js?cdv=1">
    <script type="text/javascript" src="/Scripts/file-upload/jquery.fileupload-validate.js?cdv=1">
    <script type="text/javascript" src="/Scripts/file-upload/jquery.iframe-transport.js?cdv=1">
    <script type="text/javascript" src="/Scripts/jquery.jcrop.min.js?cdv=1">
    <script type="text/javascript" src="/Scripts/imagemodel.js?cdv=1">

据我所知,验证是在jquery不引人注目的情况下完成的。 奇怪的是,如果我从控制台手动运行$(“form”)。valid(),它返回true,但是如果我在$(“form”)上有“required”属性.envalid()会正确触发

有没有办法在必要的输入中添加“必需”属性?或许还有另一种方法可以进行客户端验证。

由于

1 个答案:

答案 0 :(得分:0)

我所遇到的解决方案是为HtmlHelper类创建一个扩展,用于创建自定义验证控件,其中验证属性将添加到生成的HTML中。

  public static MvcHtmlString ValidatedTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression, IDictionary<string, object> attributes)
    {
        var message = GetMessage(htmlHelper, expression);
        return htmlHelper.TextBoxFor(expression, new Dictionary<string, object>(attributes)
            {
                { "data-val", "true" },
                { "data-val-required", message ?? "Must not be empty"},
            });
    }

 private static string GetMessage<TModel, TProperty>(HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
    {
        ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        PropertyInfo[] props = metadata.ContainerType.GetProperties();

        string message = null;
        var info = props.First(prop => prop.Name == metadata.PropertyName);
        var attribute = info.GetCustomAttribute(typeof (RequiredAttribute)) as RequiredAttribute;
        if (attribute != null)
        {
            message = attribute.ErrorMessage;
            if (string.IsNullOrEmpty(message))
            {
                var resource = attribute.ErrorMessageResourceType;
                var resourceName = attribute.ErrorMessageResourceName;

                if (resource == null || resourceName == null)
                    return null;

                message = new ResourceManager(resource).GetString(resourceName);
            }
        }

        return message;
    }