Jquery validate custom file input

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;, чтобы убедиться, что блок не занимает места.