Validate matrix columns and rows
Hi,
I'm trying to validade a table that has 20 checkboxes (5 columns and 4 rows) and that needs to have at least 2 checkboxes checked in each row and column.
I've managed to create the validation for the row part (all checkboxes in the same row have the same name).
I've also created a custom class rule (all checkboxes in the same column have the same class) but it doesn't seem to work. It only shows the row validation messages (labels that are display next to the last cell in each row) and not the column rule message.
Can anyone help me?
Thanks in advance,
Hugo
Here is the code:
<form class="form_matrix" id="form_matrix" method="get" action="form_matrix_submit">
<table><tbody><tr><th></th><th id="col_1">Col. 1</th><th id="col_2">Col. 2</th><th id="col_3">Col. 3</th><th id="col_4">Col. 4</th><th id="col_5">Col. 5</th><th></th></tr>
<tr id="line_1"><td>Line 1</td><td class="col_1"><input type="checkbox" value="col_1" id="mat_line_1_col_1" name="mat[line_1][]" class="mat_col_1 " col_id="mat_col_1"></td><td class="col_2"><input type="checkbox" value="col_2" id="mat_line_1_col_2" name="mat[line_1][]" class="mat_col_2 " col_id="mat_col_2"></td><td class="col_3"><input type="checkbox" value="col_3" id="mat_line_1_col_3" name="mat[line_1][]" class="mat_col_3 " col_id="mat_col_3"></td><td class="col_4"><input type="checkbox" value="col_4" id="mat_line_1_col_4" name="mat[line_1][]" class="mat_col_4 " col_id="mat_col_4"></td><td class="col_5"><input type="checkbox" value="col_5" id="mat_line_1_col_5" name="mat[line_1][]" class="mat_col_5 " col_id="mat_col_5"></td><td></td><td><label class="error" for="mat[line_1][]" style="display: none;">Please choose 2 ou more options in row</label></td>
</tr><tr id="line_2"><td>Line 2</td><td class="col_1"><input type="checkbox" value="col_1" id="mat_line_2_col_1" name="mat[line_2][]" class="mat_col_1 " col_id="mat_col_1"></td><td class="col_2"><input type="checkbox" value="col_2" id="mat_line_2_col_2" name="mat[line_2][]" class="mat_col_2 " col_id="mat_col_2"></td><td class="col_3"><input type="checkbox" value="col_3" id="mat_line_2_col_3" name="mat[line_2][]" class="mat_col_3 " col_id="mat_col_3"></td><td class="col_4"><input type="checkbox" value="col_4" id="mat_line_2_col_4" name="mat[line_2][]" class="mat_col_4 " col_id="mat_col_4"></td><td class="col_5"><input type="checkbox" value="col_5" id="mat_line_2_col_5" name="mat[line_2][]" class="mat_col_5 " col_id="mat_col_5"></td><td></td><td><label class="error" for="mat[line_2][]" style="display: none;">Please choose 2 ou more options in row</label></td></tr>
<tr id="line_3"><td>Line 3</td><td class="col_1"><input type="checkbox" value="col_1" id="mat_line_3_col_1" name="mat[line_3][]" class="mat_col_1 " col_id="mat_col_1"></td><td class="col_2"><input type="checkbox" value="col_2" id="mat_line_3_col_2" name="mat[line_3][]" class="mat_col_2 " col_id="mat_col_2"></td><td class="col_3"><input type="checkbox" value="col_3" id="mat_line_3_col_3" name="mat[line_3][]" class="mat_col_3 " col_id="mat_col_3"></td><td class="col_4"><input type="checkbox" value="col_4" id="mat_line_3_col_4" name="mat[line_3][]" class="mat_col_4 " col_id="mat_col_4"></td><td class="col_5"><input type="checkbox" value="col_5" id="mat_line_3_col_5" name="mat[line_3][]" class="mat_col_5 " col_id="mat_col_5"></td><td></td><td><label class="error" for="mat[line_3][]" style="display: none;">Please choose 2 ou more options in row</label></td></tr>
<tr id="line_4"><td>Line 4</td><td class="col_1"><input type="checkbox" value="col_1" id="mat_line_4_col_1" name="mat[line_4][]" class="mat_col_1 " col_id="mat_col_1"></td><td class="col_2"><input type="checkbox" value="col_2" id="mat_line_4_col_2" name="mat[line_4][]" class="mat_col_2 " col_id="mat_col_2"></td><td class="col_3"><input type="checkbox" value="col_3" id="mat_line_4_col_3" name="mat[line_4][]" class="mat_col_3 " col_id="mat_col_3"></td><td class="col_4"><input type="checkbox" value="col_4" id="mat_line_4_col_4" name="mat[line_4][]" class="mat_col_4 " col_id="mat_col_4"></td><td class="col_5"><input type="checkbox" value="col_5" id="mat_line_4_col_5" name="mat[line_4][]" class="mat_col_5 " col_id="mat_col_5"></td><td></td><td><label class="error" for="mat[line_4][]" style="display: none;">Please choose 2 ou more options in row</label></td></tr></tbody></table>
</form>
<script>
jQuery.validator.addMethod("min_col_length", function(value, element, min_length) {
var col_id_class = $(element).attr("col_id");
var table_parent = $(element).parents('table');
var n_checked_elements = table_parent.find("." + col_id_class + ":checked").length;
if (n_checked_elements >= min_length) {
return true;
}
return false;
}, "Please choose 2 ou more options in column");
$().ready(function() {
$("#texttests")..validate({
rules: {
'mat[line_1][]': {required:true, minlength:2},
'mat[line_2][]': {required:true, minlength:2},
'mat[line_3][]': {required:true, minlength:2},
'mat[line_4][]': {required:true, minlength:2},
}
});
jQuery.validator.addClassRules('mat_col_1', {min_col_length:2});
jQuery.validator.addClassRules('mat_col_2', {min_col_length:2});
jQuery.validator.addClassRules('mat_col_3', {min_col_length:2});
jQuery.validator.addClassRules('mat_col_4', {min_col_length:2});
jQuery.validator.addClassRules('mat_col_5', {min_col_length:2});
}
</script>