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/Whosebug/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; 确保块不占用 space.

Jquery 验证自定义文件输入

Jquery validate custom file input

jquery

file

validation

input

hidden