Jquery 文件上传触发不显眼的表单验证

Question

我正在使用 jquery 文件上传插件来上传 Logo 图像。文件输入位于 MVC Razor View 表单内。上传的当前行为是，一旦选择了图像，它就会发布到服务器并转换为 Base64 字符串，并通过 json 作为字符串返回，以便存储在隐藏字段和 img 标记中，按顺序显示上传的图像。稍后，图像将与其余表单字段一起保存。

此实现在 IE10、IE9、Firefox、Chrome、Opera 上完美运行，但在 IE8 中，当我选择文件时，所有表单字段的不引人注目的验证会在将图像发布到服务器之前被触发。此行为迫使用户在选择图像之前填写所有表单字段。

下面是代码:

MVC View

<form method="post" enctype="multipart/form-data" action="@( "/MenuTemplate/Index/" & Model.ClientLocationId)" novalidate="novalidate" autocomplete="off">

    <div class="logo">
            <label>Logo:</label><img id="imgLogo" src='@IIF(Model.Logo IsNot Nothing, "data:image/png;charset=utf-8;base64," & Model.Logo, String.Empty)' onerror='this.style.display = "none"'  />
            <input id="LogoFile" type="file" name="files" accept="image/jpeg,image/JPEG,image/jpg,image/JPG,image/png,image/PNG"/>
            @Html.ValidationMessage("file")
            <a id="btnRemoveLogo" href="#" class="icon" title="REMOVE LOGO"><i class="icon-remove"></i></a>
        </div>
        <div class="name">
            @Html.LabelFor(Function(m) m.TemplateName)
            @Html.TextBoxFor(Function(m) m.TemplateName, New Dictionary(Of String, Object)() From {{"id", "txtTemplateName"}, {"class", "trackChanges"}, {"style", "width:210px"}})
            @Html.ValidationMessageFor(Function(m) m.TemplateName)
        </div>
        <div class="color">
            @Html.LabelFor(Function(m) m.Color)
            @Html.TextBoxFor(Function(m) m.Color,  New Dictionary (Of String , Object )() From  { { "class", "colorpickerinput trackChanges" }, { "tabindex", "-1" }, { "tabstop", "false" } })
            @Html.ValidationMessageFor(Function(m) m.Color)
        </div>
        <div class="type">
            @Html.LabelFor(Function(m) m.MenuTypeId)
            @Html.DropDownListFor(Function(x) x.MenuTypeId, Enumerable.Empty(Of SelectListItem)(), New Dictionary(Of String, Object)() From {{"class", "ddlMenuTypeId trackChanges"}, {"style", "width:210px"}})
            @Html.ValidationMessageFor(Function(m) m.MenuTypeId)
        </div>
         <div class="type">
            @Html.LabelFor(Function(m) m.DisclosureId)
            @Html.DropDownListFor(Function(m) m.DisclosureId, Enumerable.Empty(Of SelectListItem)(), New Dictionary(Of String, Object)() From {{"class", "ddlDisclosureId trackChanges"}, {"style", "width:210px"}})
            @Html.ValidationMessageFor(Function(m) m.DisclosureId)
        </div>
        <div class="description">
            @Html.LabelFor(Function(m) m.Description)
            @Html.TextAreaFor(Function(m) m.Description, New Dictionary(Of String, Object)() From {{"class", "trackChanges"}})
            @Html.ValidationMessageFor(Function(m) m.Description)
        </div>

</form>

JS 代码

 //Upload Image
$('#LogoFile').fileupload({
    forceIframeTransport: true,
    dataType: 'json',
    url: '/postLogoImage?Id=' + Id,
    done: function (e, data) {

        try {
            var errorflag = false;
            $.each(data.files, function (index, item) {                    
                var fname = item.name;
                var ext = fname.split('.').pop().toLowerCase();

                if ($.inArray(ext, ['png', 'jpg', 'jpeg']) == -1) {
                    dialogNotification('Invalid image type. Please use .jpg, .png only.!');
                    errorflag = true;
                    return;
                }
            });
            if (errorflag === true)
                return;
            if (!data.result.error) {
                var returnedImageString = data.result.files[0];

                $('#imgLogo').attr('src', "data:image/jpg;charset=utf-8;base64," + returnedImageString);
                $('#imgLogo').show();
                $('#hLogo').val(returnedImageString);
                $('#btnRemoveLogo').show();
                SetRecordChangeFlag(true);
            }
            else {
                var errs = data.result;
                dialogNotification(errs.message);
            }
        } catch (e) {
            alert(e.message);
        }
    },
    error: function (jqXHR, status, error) {
        dialogNotification('Invalid image type. Please use .jpg, .png only.');
    }
});

感谢您提前提供帮助!

Answer 1

这应该可以解决您的问题:

$(function() {  
 var validationSettings = $.data($('form').get(0), 'validator').settings;  
 validationSettings.ignore = '.ignore, #LogoFile, :hidden, :disabled';
});