Как сделать проверку Jquery Validation условно в этом случае?

Question

Я использую Jquery Validator Framework для проверки формы, которая состоит из входного типа текста и файла элементов.

Первоначально, когда страница загружается в режиме редактирования (Форма будет иметь все значения, заполненные)

Итак, в то время, когда нажал на Отправить кнопку, проверку Jquery для входного файла типа должны пропущен (как уже было значение) и его нужно уволить только, если пользователь удаляет изображение и пытается отправить форму.

Это мой jscode

jQuery(document).ready(function() 
{ 
     $("#description").text('Iniital Value'); 
     var defimg = 'https://www.gstatic.com/webp/gallery3/1.png'; 
     $("#previewpicimg").attr('src', defimg); 
     $('#pacinsertform').validate(
     { 
       rules: 
       { 
         previewpic: 
         { 
           required: true 
         }, 
         description: 
         { 
           required: true 
         } 
       }, 
       messages: 
       { 
         previewpic: 
         { 
           required: "Upload Image required", 
         }, 
         description: 
         { 
           required: "description required", 
         } 
       }, 
       highlight: function(element) 
       { 
         $(element).parent().addClass('error') 
       }, 
       unhighlight: function(element) 
       { 
         $(element).parent().removeClass('error') 
       }, 
       submitHandler: function(event, validator) 
       { 
         if ($("#pacinsertform").valid()) 
         { 
           ajaxInsertPac(); 
           return false; 
         } 
       } 
     }); 
}); 
$("#previewpic").change(function() 
{ 
     $("#previewpic").blur().focus(); 
}); 

function ajaxInsertPac() 
{ 
     alert('ajax call heer'); 
     return false; 
} 
$(document).on("click", ".removepic", function(event) 
{ 
     $("#previewpic").attr('name', 'previewpic'); 
}); 
$(document).on("click", ".resetform", function(event) 
{ 
     $("#description").val(''); 
     $(".removepic").trigger("click"); 
     $("#pacinsertform").validate().resetForm(); 
}); 

http://jsfiddle.net/Luf0ks9b/61/

Answer 1

Вы можете установить функцию для кода проверки, а не только прямо истинного или ложного, что позволяет проверить, если ваше previewpicimg изображения установите и не подтвердите ввод.

В вашей установке проверки:

previewpic: { 
    required: function(element) { 
     if ($("#previewpicimg").attr('src') !== '') { 
      return false; 
     } else { 
      return true; 
     } 
    } 
} 

Когда previewpic вход подтверждено, он будет первым проверить, если previewpicimg имеет атрибут исходного набора и, если да, то вход не требуется, в противном случае он должен имеют значение.

JSFiddle

Answer 2

Правило проверки может быть изменено. Вы можете начать без необходимых правил и сообщений в начальной проверке, а затем переключиться на требуемые правила и сообщения, если и когда изменяется pic.

Keep track of the validation object and remove/replace rules directly. Works for me with v1.13.0

Answer 3

Браузеров блок против установки атрибута значения на входе типа файла по соображениям безопасности. При начальной загрузке поле previewpic не имеет значения и недействительно в вашем случае.

Вы можете добавить <input type="text" id="pic-hidden" value="file_path_from_backend" />" и вместо этого проверить это поле. Каждый раз, когда вы меняете загрузку файла, вы также обновляете скрытое поле с помощью jquery.

$("#previewpic").change(function() 
{ 
    $("#previewpic").blur().focus(); 
    $("#pic-hidden").val($(this).val()); 
}); 

Answer 4

Я изменил в вашей jsfiddle example проверить значение поля файла, чтобы гарантировать, что не является пустым или иметь предыдущее значение в редактирования режима. Если он пуст и он не находит предыдущее значение (src) на изображении, он возвращает true Недвижимость.

Измененная часть:

  rules: 
      { 
        previewpic: 
        { 
          required: function(){ 
           return ($("#previewpic").val()=="" && $("#previewpicimg").attr('src')==""); 
          } 
        }, 
        description: 

Попробуйте комментируя следующие строки, чтобы увидеть подтверждение:

var defimg = 'https://www.gstatic.com/webp/gallery3/1.png'; 
    $("#previewpicimg").attr('src', defimg); 

Answer 5

Мы проверяем изображение есть в DOM, является :visible и имеет src набор атрибутов.
Потому что в этом случае пользователю не нужно, чтобы выбрать изображение снова;)

required: function() { 
    var $img = $("#previewpicimg"); 
    if ($img.length && $img.is(':visible') && $img.attr('src')) { 
     return false; 
    } else { 
     return true; 
    } 
} 

В вашем removepic обработчиком, удалить изображение или набор SRC для «» (пустая строка) или скрыть его, и он будет работать лакомство;)

Вот фрагмент кода;) http://jsfiddle.net/Luf0ks9b/79/