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;确保该块不占用空间。