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

Question

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

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

下面是代码：

MVC 视图

<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';
});