Validieren von Bildern mit dem jQuery-Plugin

Question

Ich versuche, einen Eingabedateityp mit dem jQuery-Validierungs-Plugin zu validieren. Ich habe die Grundregeln dafür implementiert, aber aus irgendeinem Grund funktioniert es nicht richtig. Die erforderliche Regel funktioniert, aber wenn ich versuche, ein Bild hochzuladen, verschwindet die Fehlermeldung aus irgendeinem Grund nicht. Ich möchte, dass Benutzer Bilder hochladen, die entweder jpg, jpeg oder png sind, und selbst die Fehlermeldung wird nicht angezeigt, wenn ich den falschen Bildtyp hochlade. Hier ist mein jsfiddle: https://jsfiddle.net/avs9pejv/5/

HTML

<div class="article_properties"> 
         <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data"> 
         <p style="display: inline">Page Number</p> 
         <div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px"> 

         <p style="display: inline" class="pageNumber"></p> 
         </div> 
         <textarea style="display: none" class="inputNumber" name="pageNumber"></textarea> 
         <p>Image</p> 
         <input style="padding: 0px" type="file" name="image"> 
          <p>Subtitle</p> 
          <input type="text" name="subtitle"> 

          <p>Text</p> 
          <textarea name="text" rows="4"></textarea> 
          <input id="properties_btn" type="submit" value="Submit/Update"> 
          <hr style="border: 1px dotted lightgray; margin-bottom: 50px"> 
         </form> 



        </div> <!--End of article properties div--> 
       <div id="addOne"><p>+Add page</p></div> 

jQuery

$(".article_properties_form").validate({ 
     errorElement: 'div', 
     rules: { 
      image: { 
       required: true, 
       extension: "jpg,jpeg, png" 
      }, 

      subtitle: { 
       required: true, 
       minlength: 2, 
       maxlength: 25 
      }, 
      text: { 
       required: true, 
       minlength: 35, 
       maxlength: 275 
      } 
     }, 

     messages: { 
      image: { 
       required: "This page needs an image", 
       extension: "You're only allowed to upload jpg or png images." 
      }, 

      subtitle: { 
       required: "You have to provide a subtitle for this page!", 
       minlength: "Your subtitle must be at least 2 characters long", 
       maxlength: "Your subtitle must be less than 25 characters long" 
      }, 
      text: { 
       required: "Please enter text for this page", 
       minlength: "Your text must be at least 35 characters long", 
       maxlength: "Your text must be less than 275 characters long" 
      }, 
     }, 

     }); 

var numPages = 10; 
$('.pageNumber').text(numPages); 
$('.inputNumber').text(numPages); 

$('#addOne').click(function() 
        { 

         numPages--; 

         if (numPages == 1) 
         { 
          var articlePropsTemplate = $('.article_properties_form:last').clone();   
           $('.article_properties').append(articlePropsTemplate);       
           $('.pageNumber:last').text(numPages); 
           $('.inputNumber:last').text(numPages); 
           articlePropsTemplate[0].reset(); 
           add_validation_for_forms(); 

        articlePropsTemplate.validate().resetForm(); 
           $('.nextBtn').fadeIn("slow"); 
           $('#addOne').hide(); 
         } 

         else 
         { 
           var articlePropsTemplate = $('.article_properties_form:last').clone(); 
           $('.article_properties').append(articlePropsTemplate); 
           articlePropsTemplate[0].reset(); 
           $('.pageNumber:last').text(numPages); 
           $('.inputNumber:last').text(numPages); 
           add_validation_for_forms(); 
           articlePropsTemplate.validate().resetForm(); 
         } 

       }); 

       function add_validation_for_forms(){ 
       $(".article_properties_form").each(function(){ 
        $(this).validate({ 
         errorElement: 'div', 

     rules: { 
      image: { 
       required: true, 
       extension: "jpg|jpeg|png" 
      }, 

      subtitle: { 
       required: true, 
       minlength: 2, 
       maxlength: 25 
      }, 
      text: { 
       required: true, 
       minlength: 35, 
       maxlength: 275 
      } 
     }, 

     messages: { 
      image: { 
       required: "This page needs an image", 
       extension: "You're only allowed to upload jpg or png images." 
      }, 

      subtitle: { 
       required: "You have to provide a subtitle for this page!", 
       minlength: "Your subtitle must be at least 2 characters long", 
       maxlength: "Your subtitle must be less than 25 characters long" 
      }, 
      text: { 
       required: "Please enter text for this page", 
       minlength: "Your text must be at least 35 characters long", 
       maxlength: "Your text must be less than 275 characters long" 
      }, 
     }, 
        }); 
       }); 
} 

Answer 1

Mit Blick auf your jsFiddle ich eine Konsole Fehlermeldung erhalten ...

Ausnahme aufgetreten Beim Prüfen des Elements die Erweiterungsmethode überprüfen.

Um die Methode extension zu verwenden, müssen Sie diese Methode zuerst über einbinden.

Arbeits: https://jsfiddle.net/avs9pejv/6/