jquery validate plugin - validating form with values from a separate table

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:

form: id = "roadForm"
select input: id = "editRoad_ProjectClassification"
table: id = "dataExistingSegments"

My business rule goes something like this:

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.
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:

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

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

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?

Amanda Kitson · Accepted Answer · 2011-12-05 19:09:59Z

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).

answered Dec 5, 2011 at 19:09

Amanda Kitson

5,59712 gold badges51 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darshani Jayasekara · Accepted Answer · 2016-10-26 12:18:03Z

0

There is a way to apply validations for hidden fields in jquery validate plugin.

You only have to put , ignore: [] or you can defined controls that you do not want to validate

answered Oct 26, 2016 at 12:18

Darshani Jayasekara

7511 gold badge5 silver badges20 bronze badges

Collectives™ on Stack Overflow

jquery validate plugin - validating form with values from a separate table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related