TypeError：t.validator.methods [a]未定義？

Question

我正在使用jquery fom驗證插件，我擔心的是，imgae在註冊時不是強制上傳，但如果用戶上傳了圖片，那麼圖片應該是png,jpeg,jpg類型。

下面

是我的代碼它不工作

 setupFormValidation: function() 
    { //form validation rules 
     $(".new_user").validate({ 
      rules: { 
       "user[firstname]": "required", 
       "user[lastname]": "required", 
       "user[email]": { 
        required: true, 
        email: true 
       }, 
       "user[password]": { 
        required: true, 
        minlength: 8 
       }, 
       agree: "required", 
       "user[password_confirmation]": { 
        required: true, 
        minlength:8, 
        equalTo: "#user_password" 
       }, 
       "user[avatar]": { 
        required: false, 
        accept:"jpg,png,jpeg,gif" 
       } 
      }, 
      messages: { 
       "user[firstname]": "Please enter your firstname", 
       "user[lastname]": "Please enter your lastname", 
       "user[password]": { 
        required: "Please enter a password", 
        minlength: "Your password must be at least 8 characters long" 
       }, 
       "user[password_confirmation]": { 
        required: "Please enter a confirm password", 
        minlength: "Your password must be at least 8 characters long", 
        equalTo: "Confirm Password doesn't match with Pasword" 
       }, 
       "user[email]": { 
        required: "Please enter your email id" 
       }, 
       "user[avatar]": { 
        accept: "Only jpeg, jpg are allowed..." 
       }, 
      }, 
      submitHandler: function(form) { 
       form.submit(); 
      } 
     }); 
    } 

HTML：

<form method="post" accept-charset="UTF-8" action="/users"enctype="multipart/form-data" id="new_user" class="new_user" novalidate="novalidate"> 

    <div class="required field"> 
     <label> Name </label> 
    <input type="text" id="user_firstname" name="user[firstname]" placeholder="Firstname" autofocus="autofocus"> 
    <input type="text" id="user_lastname" name="user[lastname]" placeholder="Lastname"> 
    </div> 

    <div class="required field"> 
    <label for="user_email">Email</label> 
    <input type="email" id="user_email" name="user[email]" value=""> 
    </div> 

    <div class="required field"> 
    <label for="user_password">Password</label> 
    <input type="password" id="user_password" name="user[password]" autocomplete="off"> 
    <em>(8 characters minimum)</em> 
    </div> 


    <div class="required field "> 
    <label> Confirm Password </label> 
    <input type="password" id="user_password_confirmation" name="user[password_confirmation]" autocomplete="off"> 
     </div> 


     <div class="field"> 
    <label> Choose a profile image </label> 
    <input type="file" id="user_avatar" name="user[avatar]" accept="image/*" as="file"> 
     </div> 

     <div class="actions"> 
     <input type="submit" id="commit" value="Sign up" name="commit"> 
     </div> 
<br> 
</form> 

Answer 1

刪除接受並添加擴展和試試這個：

$("#new_user").validate({ 
     rules: { 
      "user[firstname]": "required", 
      "user[lastname]": "required", 
      "user[email]": { 
       required: true, 
       email: true 
      }, 
      "user[password]": { 
       required: true, 
       minlength: 8 
      }, 
      agree: "required", 
      "user[password_confirmation]": { 
       required: true, 
       minlength:8, 
       equalTo: "#user_password" 
      }, 
      "user[avatar]": { 
        required: false, 
        extension: "png|jpg|gif|jpeg" 
       } 
     }, 
     messages: { 
      "user[firstname]": "Please enter your firstname", 
      "user[lastname]": "Please enter your lastname", 
      "user[password]": { 
       required: "Please enter a password", 
       minlength: "Your password must be at least 8 characters long" 
      }, 
      "user[password_confirmation]": { 
       required: "Please enter a confirm password", 
       minlength: "Your password must be at least 8 characters long", 
       equalTo: "Confirm Password doesn't match with Pasword" 
      }, 
      "user[email]": { 
       required: "Please enter your email id" 
      }, 
      "user[avatar]": "Only jpeg, jpg are allowed...", 

     }, 
     submitHandler: function(form) { 
      form.submit(); 
     } 
    });