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(){
	var form = $("#form");
		form.validate({
			rules: {
				"username": {
					required: true,
				},				
				"upload": {
					required: true,
                },
			},
		});
		if (form.valid() == true){
			if(animating) return false;
			animating = true;
	
			current_fs = $(this).parent();
			next_fs = $(this).parent().next();
	
			//show the next fieldset
			next_fs.delay(100).show(0); 
			//hide the current fieldset with style
			current_fs.delay(100).hide(0);
			animating = false;
	
		}

});

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

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

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

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

.file-upload {
	display: block;
	width: 260px;
	padding: 10px 16px 10px 56px;
	border: none;
	outline: none;
	margin-bottom: 18px;
	font: 16px/28px 'Open Sans','Helvetica Neue',Helvetica,sans-serif;
	color: #3f3f3f;
	font-weight: 300;
	background: #ececec;
	-webkit-border-radius: 0;
	cursor: pointer;
	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; 确保该块不占用空间。