jquery驗證自定義文件輸入

Question

我想驗證一個自定義樣式的文件輸入是多頁html表單的一部分。輸入本身是通過其標籤隱藏和控制的。

Jquery通常不會驗證隱藏字段，所以對文件輸入的驗證不起作用。但是，如果我將ignore [],設置爲包含隱藏字段，則表單將停止工作，因爲它會驗證（隱藏）後續字段集中的所有輸入，只要我在第一個字段集上單擊下一步。

任何想法如何解決這個問題，並驗證隱藏的文件輸入？

謝謝。

我的代碼：

var current_fs, next_fs, previous_fs; //fieldsets 
 
var left, opacity, scale; //fieldset properties which we will animate 
 
var animating; //flag to prevent quick multi-click glitches 
 

 
    
 
$(".next").click(function(){ 
 
\t var form = $("#form"); 
 
\t \t form.validate({ 
 
\t \t \t rules: { 
 
\t \t \t \t "username": { 
 
\t \t \t \t \t required: true, 
 
\t \t \t \t }, \t \t \t \t 
 
\t \t \t \t "upload": { 
 
\t \t \t \t \t required: true, 
 
       }, 
 
\t \t \t }, 
 
\t \t }); 
 
\t \t if (form.valid() == true){ 
 
\t \t \t if(animating) return false; 
 
\t \t \t animating = true; 
 
\t 
 
\t \t \t current_fs = $(this).parent(); 
 
\t \t \t next_fs = $(this).parent().next(); 
 
\t 
 
\t \t \t //show the next fieldset 
 
\t \t \t next_fs.delay(100).show(0); 
 
\t \t \t //hide the current fieldset with style 
 
\t \t \t current_fs.delay(100).hide(0); 
 
\t \t \t animating = false; 
 
\t 
 
\t \t } 
 

 
}); 
 

 
$(".previous").click(function(){ \t 
 
\t if(animating) return false; 
 
\t animating = true; 
 
\t 
 
\t current_fs = $(this).parent(); 
 
\t previous_fs = $(this).parent().prev(); 
 
\t 
 
\t 
 
\t //show the previous fieldset 
 
\t previous_fs.delay(100).show(0); 
 
\t //hide the current fieldset with style 
 
\t current_fs.delay(100).hide(0); 
 
\t animating = false; 
 
\t 
 
});

fieldset { 
 
\t border: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
fieldset:not(:first-of-type) { 
 
\t display: none; 
 
} 
 

 
input[type="file"] { 
 
    display: none; 
 
} 
 

 
.file-upload { 
 
\t display: block; 
 
\t width: 260px; 
 
\t padding: 10px 16px 10px 56px; 
 
\t border: none; 
 
\t outline: none; 
 
\t margin-bottom: 18px; 
 
\t font: 16px/28px 'Open Sans','Helvetica Neue',Helvetica,sans-serif; 
 
\t color: #3f3f3f; 
 
\t font-weight: 300; 
 
\t background: #ececec; 
 
\t -webkit-border-radius: 0; 
 
\t cursor: pointer; 
 
\t background: url(http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d) 2%/45px no-repeat #ececec; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script> 
 
<form id="form"> 
 
<fieldset> 
 
    <input type="text" name="username" id="username"> 
 
    <input type="button" name="next" value="Next" class="next"> 
 
</fieldset> 
 
<fieldset> 
 
    <label for="upload" class="file-upload">(PDF/JPG, max. 3 MB)</label> 
 
    <input type="file" name="upload" id="upload" class="file-to-upload" accept=".pdf,.jpg,.jpeg"> 
 
    <input type="button" name="previous" value="Previous" class="previous"> 
 
    <input type="button" name="next" value="Next" class="next"> 
 
</fieldset> 
 
<fieldset> 
 
    <input type="text" name="email" id="email"> 
 
    <input type="button" name="previous" value="Previous" class="previous"> 
 
    <input type="submit" name="submit" value="Send"> 
 
</fieldset> 
 
</form>

Answer 1

而不是display: none;。改爲使用opacity: 0;。並使用position: absolute;確保該塊不佔用空間。