1. 首頁
  2. 問答
  3. 使用jquery插件輸入文件驗證

使用jquery插件輸入文件驗證

2017-07-03 28 views
0

這是我在這段代碼中的代碼一切正常，但文件提交沒有通過此代碼驗證。 所有輸入字段由該驗證插件除了申請文件類型驗證..我想我錯過了一些東西PLZ調試它使用jquery插件輸入文件驗證

$("#contactus_form").validate({ 
 

 
    // Specify the validation rules 
 
    rules: { 
 
     name: "required", 
 
     contact: { 
 
      required:true, 
 
      maxlength: 10, 
 
      minlength: 10, 
 
      digits: true 
 

 
     }, 
 
     degree: "required", 
 
     applying_for: "required", 
 
     experience: { 
 
      required:true, 
 
      // maxlength: 10, 
 
      digits: true 
 

 
     }, 
 
     user_cv: { 
 
      //check:"required", 
 
     required: true, 
 
     extension: "doc|pdf" 
 
    }, 
 
     email: { 
 
      required: true, 
 
      email: true 
 
     } 
 

 

 
    }, 
 

 
    // Specify the validation error messages 
 
    messages: { 
 
     name: "Please enter your first name", 
 
     contact: "Please enter your contact number", 
 
     degree: "Please enter your Qualification", 
 
     experience: "Please enter your experience", 
 
     user_cv: "Please select Your Cv", 
 
     applying_for: "Please accept our policy", 
 
     email: "Please enter a valid email address" 
 

 
    }, 
 

 

 
});
<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data"> 
 
      <div class="form-group"> 
 
       <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <!-- <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'"> 
 
      --> 
 
      <select id="degree" name="degree" class="form-control"> 
 
       <option value="">Not selected </option> 
 
       <option value="Graduation ">Graduation </option> 
 
        <option value="Post Graduation">Post Graduation </option> 
 
       </select> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <div class="field"> 
 
       <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" /> 
 
       <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span> 
 
        <strong class="browse-btn butn">Browse</strong></label> 
 
       </div> 
 

 
      </div> 
 
      <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button> 
 
      </form>

來源

2017-07-03 shubham yadav

+0

在哪裏'的validate（）'？命名你的圖書館。 – Pete

回答

0

我想你忘記添加jquery validate libraby。

試試這個片斷希望它會幫助你

編輯

你應該在你的代碼添加additional-methods.js。立即檢查其工作正常

$("#contactus_form").validate({ 
 

 
    // Specify the validation rules 
 
    rules: { 
 
     name: "required", 
 
     contact: { 
 
      required:true, 
 
      maxlength: 10, 
 
      minlength: 10, 
 
      digits: true 
 

 
     }, 
 
     degree: "required", 
 
     applying_for: "required", 
 
     experience: { 
 
      required:true, 
 
      // maxlength: 10, 
 
      digits: true 
 

 
     }, 
 
     user_cv: { 
 
     required: true, 
 
     extension: "doc|pdf" 
 
     }, 
 
     email: { 
 
      required: true, 
 
      email: true 
 
     } 
 
    }, 
 

 
    // Specify the validation error messages 
 
    messages: { 
 
     name: "Please enter your first name", 
 
     contact: "Please enter your contact number", 
 
     degree: "Please enter your Qualification", 
 
     experience: "Please enter your experience", 
 
     user_cv: "Please select Your Cv", 
 
     applying_for: "Please accept our policy", 
 
     email: "Please enter a valid email address" 
 

 
    }, 
 

 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.js"></script> 
 
<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data"> 
 
      <div class="form-group"> 
 
       <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <!-- <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'"> 
 
      --> 
 
      <select id="degree" name="degree" class="form-control"> 
 
       <option value="">Not selected </option> 
 
       <option value="Graduation ">Graduation </option> 
 
        <option value="Post Graduation">Post Graduation </option> 
 
       </select> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <div class="field"> 
 
       <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" /> 
 
       <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span> 
 
        <strong class="browse-btn butn">Browse</strong></label> 
 
       </div> 
 

 
      </div> 
 
      <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button> 
 
      </form>

來源

2017-07-03 06:58:32

+0

不，我已經添加了這些東西 –

+0

@shubhamyadav但它工作正常。你得到哪個錯誤？ –

+0

我沒有得到任何錯誤，當我點擊提交buttun表格即使沒有選擇文件被提交 –

0

嘗試一下本作文件驗證

$('input[name^="fileupload"]').each(function() { 
    $(this).rules('add', { 
     required: true, 
     extension: "doc|pdf" 
    }) 
})

來源

2017-07-03 07:00:29

+0

我認爲只有一個輸入'文件'類型，所以需要做每個循環 –

+0

我怎麼能做到這一點？ –

+0

將它添加到驗證函數中的if循環中 –

1

檢查片段。其工作

包括外部jquery.validate.js還沒有做牛逼忘記從添加jquery libray

$("#contactus_form").validate({ 
 

 
    // Specify the validation rules 
 
    rules: { 
 
     name: "required", 
 
     contact: { 
 
      required:true, 
 
      maxlength: 10, 
 
      minlength: 10, 
 
      digits: true 
 

 
     }, 
 
     degree: "required", 
 
     applying_for: "required", 
 
     experience: { 
 
      required:true, 
 
      // maxlength: 10, 
 
      digits: true 
 

 
     }, 
 
     user_cv: { 
 
      //check:"required", 
 
     required: true, 
 
     extension: "doc|pdf" 
 
    }, 
 
     email: { 
 
      required: true, 
 
      email: true 
 
     } 
 

 

 
    }, 
 

 
    // Specify the validation error messages 
 
    messages: { 
 
     name: "Please enter your first name", 
 
     contact: "Please enter your contact number", 
 
     degree: "Please enter your Qualification", 
 
     experience: "Please enter your experience", 
 
     user_cv: "Please select Your Cv", 
 
     applying_for: "Please accept our policy", 
 
     email: "Please enter a valid email address" 
 

 
    }, 
 

 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<form action="" method="post" id="contactus_form" novalidate="novalidate" enctype="multipart/form-data"> 
 
      <div class="form-group"> 
 
       <input type="text" id="name" name="name" class="form-control contro" value="" placeholder="Name*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Name*'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="email" name="email" class="form-control contro" value="" placeholder="Email*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email*'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="contact" name="contact" class="form-control contro" value="" placeholder="Contact Number*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Contact number'"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <!-- <input type="text" id="degree"class="form-control contro" value="" placeholder="Highest Degree*" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Highest Degree'"> 
 
      --> 
 
      <select id="degree" name="degree" class="form-control"> 
 
       <option value="">Not selected </option> 
 
       <option value="Graduation ">Graduation </option> 
 
        <option value="Post Graduation">Post Graduation </option> 
 
       </select> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="applying_for" name="applying_for" class="form-control contro" value="" placeholder="Applying For" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Applying For'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="text" id="experience" name="experience" class="form-control contro" value="" placeholder="Experince in Year" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Experince in Year'"> 
 
      </div> 
 
      <div class="form-group"> 
 
       <div class="field"> 
 
       <input type="file" name="user_cv" id="user_cv" class="inputfile inputfile-6" /> 
 
       <label for="user_cv" class="file-upload"> <span class="form-control attach" id="user_cv_name">Upload Resume</span> 
 
        <strong class="browse-btn butn">Browse</strong></label> 
 
       </div> 
 

 
      </div> 
 
      <button id="submit" name="submit" type="submit" class="btn-style sub">SUBMIT</button> 
 
      </form>

來源

2017-07-03 07:02:15

+0

我已添加所有庫 –

+1

所以在控制檯中顯示什麼錯誤？ –

+0

感謝沒有prblm只有我的設計isssue btw謝謝你們幫助我 –

相關問題

 相關問題