3

4つの入力フィールドが数行あるフォームがあります。次のようになります。

<tr>
    <td><input name="company01" id="company01" /></td>
    <td><input name="description01" id="description01" /></td>
    <td><input name="costs01" id="costs01" class="sum" /></td>
    <td><input name="file01" id="file01" /></td>
</tr>

<tr>
    <td><input name="company02" id="company02" /></td>
    <td><input name="description02" id="description02" /></td>
    <td><input name="costs02" class="sum" id="costs02" /></td>
    <td><input name="file02" id="file02" /></td>
</tr>

これで、ユーザーが行の入力の1つ（たとえば、コストフィールド）を入力するときに、会社と説明（添付ファイルではない）を入力する必要があります。

ファイルのアップロードは必須ではありません。ただし、ユーザーは少なくとも会社、説明、およびコストを順番に入力する必要があります。

少なくとも1つの行が完了したかどうかを確認する方法を教えてもらえますか？そして、jQUery検証プラグインを使用して他の2つが完了したかどうかを確認するにはどうすればよいですか？

4

4 に答える 4

3

必要なメソッドと依存関係の式で実行できます 

....
rules : {
  company01 : { required : "#company02:blank" },
  description01 : { required : "#company01:filled" },
  costs01: { required : "#company01:filled" },
  // now company 2 
  company02 : { required : "#company01:blank" },
  description02 : { required : "#company02:filled" },
  costs02: { required : "#company02:filled" }
}
....
于 2013-02-19T15:14:01.690 に答える
1

「依存関係式」を使用して、あるフィールドのルールを別のフィールドの状態に依存させることができます。

これが実際の例です...

作業デモ： http： //jsfiddle.net/GMK5V/

jQuery：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // other options,
        rules: {
            field1: {
                required: true
            },
            field2: {
                required: '#field1:filled'
            }
        }
    });

});

HTMLid （それぞれにも追加されますinput）：

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <input type="text" name="field2" id="field2" />
</form>
于 2013-02-19T16:35:12.000 に答える
0

デフォルトでは、jQueryvalidateは無効な入力をチェックしません。依存関係の式は質問で求めていることを正確に実行しますが、会社名なしで説明を許可するのがフォームに意味があるかどうかを自問する価値があると思います。目的のユーザーエクスペリエンスによっては、説明、コスト、ファイルアップロードを無効にして、これらのフィールドを単独で使用できないことをユーザーに明確に伝えることから始める方がよい場合があります。次に、jQuery検証ルールでそれらを必須としてマークし、有効にすると必須になります。

秘訣は、会社名が追加されたときにそれらを有効にすることです。私はこれを次のようにします：

マークアップ

<!-- add a class to the row for ease of dom traversal -->
<tr class="company-row">
    <!-- add a class to the company name for ease of selection -->
    <td><input class="company-name" name="company01" id="company01" /></td>
    <td><input name="description01" id="description01" /></td>
    <td><input name="costs01" id="costs01" class="sum" /></td>
    <td><input name="file01" id="file01" /></td>
</tr>

JavaScript

$(document).ready(function() {
    $('.company-name').on('keyup', function() {
        var $this = $(this);
        if($this.val() != '') {
            $this.parents('.company-row').find('input').removeAttr('disabled');
        } else {
            $this.parents('.company-row').find('input').not('.company-name').attr('disabled', 'disabled');
        }
    });
)}

それでうまくいくはずですが、確かに私は今書いたものを何もテストしていません。また、誰かが会社の説明を省略し、送信しようとし、フィールドの検証メッセージが表示され、会社名が削除され、検証メッセージが消えないという状況に遭遇する可能性があります（フォームを送信できます）。今、それを修正する方法を忘れていますが、包括的なアプローチは.resetform()、検証メッセージ全体を削除するバリデーター全体を呼び出すことです。送信時に呼び出すと、うまくいく可能性があります。

于 2013-02-19T15:33:48.960 に答える
0

validateメソッドで解決しませんでした。私がしたことは、行内のすべての入力をチェックして、それらがすべて空であるか、すべて入力されているかを確認することでした。いずれかの行が一致しない場合は、アラートダイアログを作成するだけです。

あまり良くありませんが、少なくとも検証は完了します。

于 2013-05-07T18:41:07.853 に答える