Question

I am using the jquery validate plugin to validate all the fields on my form, without issue.

However, I have a need to validate the form against the number of rows in an html table located outside the form markup.

Here are the elements in question:

1. form: id = “roadForm”
2. select input: id = “editRoad_ProjectClassification”
3. table: id = “dataExistingSegments”

My business rule goes something like this:

1. If the value of “editRoad_ProjectClassification” select is equal to “NO TREATMENTS”, then the number of rows in the table “dataExistingSegments” must be equal to zero.
2. If the value of “editRoad_ProjectClassification” select is not equal to “NO TREATMENTS”, then the number of rows in the table “dataExistingSegments” must be greater than zero.

I have created two custom rules for the validator as follows:

1. To verify there are no rows in the table if “editRoad_ProjectClassification” is equal to “NO TREATMENTS”.

   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'")
   );
   

2. To verify that there is at least one row in the table if “editRoad_ProjectClassification” is not equal to “NO TREATMENTS”

   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'")
   );
   

3. Then to validate the form, I have the following:

   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"
       }
   }
   });
   

This is not working, and I assume it is because the “dataExistingSegments” table is not located within the form. But due to the way the markup and css is done, I can’t place this table within the form. How can I get this to work?

Answer 1

Well, I figured it out and thought I should post here for anyone else who may need to do this.

I made a text input inside the form and styled it so that it looked like a label, and disabled it so that users couldn’t type in it.

I then assigned the validation rules to this input, instead of to the table. And now the validation works and the error message appears properly.

One other thing, I experimented with hiding the input. I was hoping the input would be hidden, but the validation message would still show up. But apparently the jquery validate plugin does not apply validation to any hidden fields in the form. So that didn’t work. The input had to be visible, which is why I styled it to look like a label, and disabled it (to work like a label).