1

ユーザーがサーバーに送信する 1 つの大きなフォームで構成される Web アプリを作成しています。

このフォームには標準の jQuery 検証があり、正常に機能します。( http://bassistance.de/jquery-plugins/jquery-plugin-validation/ )

ただし、フォームの途中にあるセクションは、ajax 呼び出しを介して送信する必要があります。フォームのこのセクションに単純な「追加」ボタンがあるとしましょう -- 追加ボタンが押されたときにフォームのこのセクションのみを検証することは可能ですか?

そして、正常に送信されたときにフォームの残りを検証します。jQuery Validation API を調べましたが、何も表示されませんでした。

次のような手動呼び出しができると思いました：

$('#commentForm').validate({
    rules : {
        cname: {
            required: true,
            minlength: 2
        }
    }
}).element("#cname");

残念ながら、これにより、メインの送信ボタンが押されたときにチェックされる検証が追加されます。

この問題に関するヘルプやアドバイスをいただければ幸いです:)

4

1 に答える 1

3

これはあなたのために働くかもしれません。jsfiddle へのリンク

HTML 

  <form id="commentForm" method="post" action="index.php" style="font-family: Georgia">
     <fieldset>
        <legend>The main form</legend>
        <label for="text1">Text 1</label>
        <input type="text" id="text1" name="text1" />
        <br /><br />
        <fieldset id="opt">
           <legend>This section is only rquired when "Add" button is clicked</legend>
           <label for="text2">Text 2</label>
           <input type="text" id="text2" name="text2" />
           <br /><br />
           <button id="add">Add</button>

        </fieldset>
        <br />
        <label for="text4">Text 4</label>

        <input type="text" id="text4" name="text4" />
        <br /><br />
        <input type="submit" id="submit" value="Post Main Form" />
     </fieldset>
  </form>

JavaScript

        $('#commentForm').validate({
           //ignore everything in the sub-form
           ignore: '#opt *',
           rules: {
              text1: {
                 required: true,
                 minlength: 2
              },
              text4: {
                 required: true,
                 minlength: 2
              }
           }
        });

        $('#add').click(function () {

           var txt = $('#text2');

           //here you add validation rules for sub-form elements
           txt.rules('add', {
              required: true
           });

           //here you trigger the validation for elements in subform
           txt.valid();

           /* here you do your ajax stuff */

           return false;
        });

このアプローチは、要素の検証を手動でトリガーする方法とignore同様に、jQuery バリデータ プラグインのオプションです。.valid()お役に立てば幸いです。

この例は、jQuery Validation Plugin - v1.10.0

于 2013-04-27T15:48:32.363 に答える