3

奇妙な問題があります。ファイルのアップロードと他のいくつかのテキストエリアを含むフォームがあります。すべてのフィールドが必要です。したがって、基本的にいくつかのフィールドが空白のままの場合、検証は正常に機能しますが、ファイルのアップロードが空白のままの場合に限ります、フォームが送信されます。

これが私のコードです

 <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'
    },
4

1 に答える 1

15

あなたのコードは問題なく動作しているようです。非表示のフィールドは 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'
            }
        }
    });

});

デモ: http://jsfiddle.net/ptV35/

EDIT : OP がどちらの方向に進みたいかはよくわかりませんが、次のデモでは、ファイル アップロード フィールドが再度非表示になると、保留中のエラー メッセージが非表示になります。

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

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

于 2013-02-28T23:57:20.050 に答える