Почему не выполняется проверка правильности jquery?

Question

У меня есть эта форма со всеми другими входами, и все входы отображают ошибку правильно, кроме этой, которая является загрузкой файла.

Может кто-нибудь дать мне пару глаз и посмотреть, где я ошибся?

Когда я console.log(element), который должен показать, когда произошла ошибка, но это вообще не произошло.

это код для моего HTML

<label for="phone">Phone</label><input type="text" name="phone" value=""> 
<label for="city">City</label><input type="text" name="city" value=""> 
<label for="qr_code_image">QR CODE</label><input type="file" class="hidden image-field" name="qr_code_image" id="qr_code_image"><div class="add-image-icon" data-field="qr_code_image"><i class="icon-plus"></i></div> 

в моем JS

  rules: { 
       city: { 
        required: true 
       }, 
       phone: { 
        required: true, 
       }, 
       qr_code_image: { 
        required: true 
       } 
      }, 
      // Where to place the error message 
      errorPlacement: function (error, element) { 
       console.log(element); 
       error.appendTo(element.next('.errorMsg')); 
      } 

я не сделал»добавить дивы для вывода ошибок здесь. с консольным журналом, я могу видеть только две ошибки вместо 3. Я попытался отправить, даже не щелкнув по загрузке изображения.

Edit: я понял, эти два класса как с использованием display: none !important

Есть ли способ сохранить CSS и до сих пор делают проверки на работу?

Answer 1

Попробуйте это:

... 
qr_code_image: { 
    required: true, 
    accept: "image/jpeg, image/pjpeg" 
} 

Answer 2

$(document).ready(function() { 

    $('#form').validate({ 
     ignore: [], 
     rules: { 
      city: { 
       required: true 
      }, 
      phone: { 
       required: true, 
      }, 
      qr_code_image: { 
       required: true, 
       accept: 'jpeg|png|jpeg' 
      } 
     }, 
     // Where to place the error message 
     errorPlacement: function (error, element) { 
      console.log(element); 
      error.appendTo(element.next('.errorMsg')); 
     } 
    }); 

}); 

добавить ignore:[] поле опций может исправить problem.I также столкнулись с подобной проблемой, делая это исправили проблему.