Warum wird die jquery-Validierung nicht ausgeführt?

Question

Ich habe dieses Formular mit allen anderen Eingängen und alle Eingänge zeigen den Fehler korrekt außer dieser, der ein Datei-Upload ist.

Kann mir jemand ein Auge geben und sehen, wo ich es falsch gemacht habe?

Wenn ich console.log(element) was soll zeigen, wenn der Fehler passiert, aber es überhaupt nicht passiert.

Dies ist der Code für meine 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> 

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

I‘hier die divs für die Fehlerausgabe hinzufügen den Ball hielt. mit dem Konsolenprotokoll, kann ich nur zwei Fehler anstelle von 3 sehen. Ich versuchte zu übermitteln, ohne auch nur das Bild Upload klicken.

Edit: Ich erkannte diese beiden Klassen beide display: none !important verwenden

Gibt es eine Möglichkeit die CSS zu halten und immer noch die Validierung vornehmen zu arbeiten?

Answer 1

Try this:

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

}); 

fügen Sie das ignore:[] Feld in den Optionen könnte die problem.i auch konfrontiert ein ähnliches Problem beheben zu tun, dass das Problem behoben.