2013-02-28 2 views
3

У меня есть странная проблема. У меня есть форма с файловой загрузкой и несколькими другими текстовыми областями .each и каждое поле требуется. Обычно, когда несколько полей остаются пустыми, проверка работает отлично, но если и только если загрузка файла оставлена ​​пустой, форма будет отправлена.Проверка загрузки файлов с помощью jQuery Validate plugin

Вот мой код

<li > 
    <p> 
    <label for="rad">radio label: 
    </label><br> 

    <input type="radio" name="rad" value="yes" style="width:20px">&nbsp; Yes&nbsp;&nbsp;</input> 
    <input type="radio" name="rad" value="no" style="width:20px">&nbsp; No</input><br/> 
    <label for="cv" class="error" style="display:none">This field is required</label> 
    </p> 
    <p> 
    <input type="file" name="fupl" style="display:none;margin-top:10px" id="fup"/> 
    <label for="fupl" class="error" style="display:none;color:red">This field is required</label> 
    </p> 
    </li> 
    <br> 
    <li> 
    <label>checkbox label 
    </label><br><br> 
<input type="checkbox" name="cb" value="tick" style="width:20px">&nbsp;&nbsp; <small>checkbox field<small></input><br>           <label for="fee" class="error" style="display:none">This field is required</label> 
    </li> 
    <br><li> 
<input type="submit" class="button" value="SUBMIT" style="float:right"/> 
</li> 
<script> 
$(document).ready(function() 
{ 
$("input[type='radio']").change(function(){ 
if($(this).val()=="yes") 
{ 
$("#fup").show(); 
} 
else 
{ 
    $("#fup").hide(); 
} 
}); 
}); 

и это мой JQuery

$('#form').validate({ 
rules: {  
fupl: { 
    required: true, 
    accept:'docx|doc' 
    },  
+0

Вы не показываете 'form' тегов в коде выше. – Sparky

ответ

13

Ваш код, кажется, работает нормально. Скрытые поля игнорируются плагином Validate. Однако, когда вы показываете поле загрузки файла с помощью переключателя, он будет проверять и отображать сообщение об ошибке. См: http://jsfiddle.net/y5ghU/


Ваш код:

<input type="file" name="fupl" style="display:none;margin-top:10px" id="fup"/> 

Ваше поле загрузки файла устанавливается в display:none; и плагин будет игнорировать все скрытые поля по умолчанию.

Используйте опцию ignore: [], чтобы отключить эту функцию.

$(document).ready(function() { 

    $('#form').validate({ 
     ignore: [], 
     rules: { 
      fupl: { 
       required: true, 
       accept: 'docx|doc' 
      } 
     } 
    }); 

}); 

DEMO: http://jsfiddle.net/ptV35/


EDIT: Не совсем уверен, каким образом OP хочет идти, но следующий демо скрывает любое сообщение в ожидании ошибки, когда поле загрузки файла повторно -hidden.

$("#fup").next('label.error').hide(); 

http://jsfiddle.net/y5ghU/4/

+0

Спасибо, что сработало..Но это как скоро после проверки, поле для загрузки файла исчезает и отображается только сообщение об ошибке. Мне также нужно отобразить поле для загрузки файла. – lakshganga

+0

Кроме того, даже если я нажму «нет», тогда также будет указано, что это поле необходимо. – lakshganga

+0

@lakshganga, вы можете добавить '$ (" # fup "). Next ('label.error'). Hide();', чтобы скрыть метку. См .: http://jsfiddle.net/y5ghU/4/ – Sparky