2011-12-05 9 views
0

jquery validateプラグインを使用して、フォームのすべてのフィールドを問題なく検証しています。jquery validate plugin - 別のテーブルの値でフォームを検証する

しかし、フォームマークアップの外側にあるhtmlテーブルの行数に対してフォームを検証する必要があります。ここ

は、問題の要素である:

  1. 形式:ID = "roadForm"
  2. 選択入力:ID = "editRoad_ProjectClassification"
  3. 表:ID = "dataExistingSegments"

私のビジネスルールは次のようになります:

  1. "editRoad_ProjectClassification" selectの値が "NO TREATMENTS"に等しい場合、テーブル "dataExistingSegments"の行数はゼロに等しくなければなりません。
  2. "editRoad_ProjectClassification"の値が "NO TREATMENTS"に等しくない場合、テーブル "dataExistingSegments"の行数はゼロより大きくなければなりません。

    1. は「editRoad_ProjectClassificationは」「NOトリートメント」に等しい場合、テーブルに行が含まれていないことを確認するには、次のよう

    私はバリのための2つのカスタムルールを作成しています。

    g$.validator.addMethod("roadWithNoTreatmentsHasNoSegments", function (value, element, params) { 
    var pc = g$('#editRoad_ProjectClassification').val(); 
    var segmentCount = g$('#dataExistingSegments tbody tr').length; 
    
    if (pc == 'NO TREATMENTS' && segmentCount > 0) { 
        return this.optional(element) || false; 
    } 
    else { 
        return this.optional(element) || true; 
    } 
    }, g$.format("Must have no segments if Project Classification is 'NO TREATMENTS'") 
    ); 
    
  3. 「editRoad_ProjectClassificationは」フォームを検証するためにそして「NOトリートメント」

    g$.validator.addMethod("roadWithTreatmentsHasAtLeastOneSegment", function (value, element, params) { 
    var pc = g$('#editRoad_ProjectClassification').val(); 
    var segmentCount = g$('#dataExistingSegments tbody tr').length; 
    
    if (pc != 'NO TREATMENTS' && pc != '' && segmentCount == 0) { 
        return this.optional(element) || false; 
    } 
    else { 
        return this.optional(element) || true; 
    } 
    }, g$.format("Must have at least one segment if Project Classification is not 'NO TREATMENTS'") 
    ); 
    
  4. 、Iは以下いないに等しくない場合に少なくとも一つの行がテーブル内に存在していることを確認します:

    g$("#roadForm").validate({ 
    errorElement: "span", 
    rules: { 
        editRoad_Jurisdiction: "required", 
        editRoad_TreatmentDate: { 
         "required": true, 
         date: true, 
         roadDateIsValidForMultiYearPlan: true 
        }, 
        editRoad_ProjectClassification: "required", 
        editRoad_ImprovementType: "required", 
        editRoad_SurfaceType: "required", 
        editRoad_MultiYear: "required", 
        editRoad_LifeExpectancy: { 
         "required": true, 
         digits: true 
        }, 
        editRoad_MDOTJobID: { 
         digits: true 
        }, 
        editRoad_ProjectID: { 
         maxlength: 50 
        }, 
        dataExistingSegments: { 
         "required": true, 
         roadWithTreatmentsHasAtLeastOneSegment: true, 
         roadWithNoTreatmentsHasNoSegments: true 
        } 
    }, 
    messages: { 
        editRoad_Jurisdiction: "Please select an option", 
        editRoad_TreatmentDate: { 
         required: "Please select an date", 
         date: "Please enter a properly formatted date" 
        }, 
        editRoad_ProjectClassification: "Please select an option", 
        editRoad_ImprovementType: "Please select an option", 
        editRoad_SurfaceType: "Please select an option", 
        editRoad_MultiYear: "Please select an option", 
        editRoad_LifeExpectancy: { 
         required: "Please enter a value", 
         digits: "Must be a valid number" 
        }, 
        editRoad_MDOTJobID: { 
         digits: "Must be a valid number" 
        }, 
        editRoad_ProjectID: { 
         maxlength: "Cannot be more than 50 characters long" 
        } 
    } 
    }); 
    

これは動作していない、と私は、「データので、それがあると仮定しますExistingSegments "テーブルはフォーム内にありません。しかし、マークアップとCSSのやり方によって、このテーブルをフォーム内に配置することはできません。これをどのように機能させることができますか?

答えて

1

まあ、私はそれを理解し、これを行う必要があるかもしれない誰かのためにここに投稿するべきだと思った。

フォーム内にテキスト入力を行い、ラベルのようにスタイルを設定し、ユーザーが入力できないように無効にしました。

次に、テーブルではなく、この入力に検証ルールを割り当てました。これで、検証が正しく行われ、エラーメッセージが正しく表示されます。

もう1つのことは、入力を隠すことで実験しました。私は入力が隠されることを望んでいましたが、検証メッセージはまだ表示されます。しかし、明らかにjqueryのvalidateプラグインはフォームの隠しフィールドにバリデーションを適用しません。それはうまくいきませんでした。入力は可視でなければならなかったので、ラベルのようにスタイルを設定し、ラベルのように動作させるようにしました。

0

jquery validateプラグインで非表示フィールドの検証を適用する方法があります。

[] を無視するか、検証しないコントロールを定義することができます。

関連する問題