Загрузка файла JQuery Firing Ненавязчивая проверка формы

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