jquery validateプラグインを使用して、フォームのすべてのフィールドを問題なく検証しています。jquery validate plugin - 別のテーブルの値でフォームを検証する
しかし、フォームマークアップの外側にあるhtmlテーブルの行数に対してフォームを検証する必要があります。ここ
は、問題の要素である:
- 形式:ID = "roadForm"
- 選択入力:ID = "editRoad_ProjectClassification"
- 表:ID = "dataExistingSegments"
私のビジネスルールは次のようになります:
- "editRoad_ProjectClassification" selectの値が "NO TREATMENTS"に等しい場合、テーブル "dataExistingSegments"の行数はゼロに等しくなければなりません。
- "editRoad_ProjectClassification"の値が "NO TREATMENTS"に等しくない場合、テーブル "dataExistingSegments"の行数はゼロより大きくなければなりません。
は「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'") );
「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'") );
、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のやり方によって、このテーブルをフォーム内に配置することはできません。これをどのように機能させることができますか?