I have a table with 5 rows that requires data in fields in any one row. Is there a way to make the table required instead of the field?
Hi Kathy,
I see, you can certainly achieve this functionality with some custom JS. If you add the class "myTable" to your table and add a custom HTML field with an error message such as "Table Requires Data" with the css classes "tablerrormessage hidden" , the below code added to your Custom Javascript should hide and show an error message when the table contains no data, and validation will be done on table change and when submit is clicked
// A $( document ).ready() block.
$(document).ready(function(){
$(".myTable table tbody").on("change","input",function(){
checkTable() == true ? $(".tableerrormessage").hide() : $(".tableerrormessage").show()
//if table is changed hide or show error depending if data was found
});
$(".Submit").on("click",function(){
return checkTable()
// if checkTable returns true, form submits if no other errors, or if false form will not submit
});
}); // end of document ready
function checkTable(){ // checkTable Function (returns if true if table contains any data)
var tableRowsWithData = 0
$(".myTable table tbody input").each(function(){ //loop over table inputs
if ($(this).val()) tableRowsWithData += 1 // if data found add 1 to count
});
if (tableRowsWithData) return true; // if data found return true
else {
$(".tableerrormessage").show()
return false;
} // no data found show error and return false to prevent submit
}
There is no out of the box way to simply make a table required. But checking the required tick box on each column in a table will have the same effect and in form a user that the field they just left empty is required.
You could use some custom Jquery to scan all the table inputs on submit to check if all of its contents are filled and throw an error if not. But i see no real need if you can simply use the required fields to prevent submission.
Thank you, Christian. Unfortunately when you choose required on the field it wants a value in each row of the table. I need some data in the columns, but not in all rows. The example below illustrates how I want to be able to validate that the table has data, but not each row.
Hi Kathy,
I see, you can certainly achieve this functionality with some custom JS. If you add the class "myTable" to your table and add a custom HTML field with an error message such as "Table Requires Data" with the css classes "tablerrormessage hidden" , the below code added to your Custom Javascript should hide and show an error message when the table contains no data, and validation will be done on table change and when submit is clicked
// A $( document ).ready() block.
$(document).ready(function(){
$(".myTable table tbody").on("change","input",function(){
checkTable() == true ? $(".tableerrormessage").hide() : $(".tableerrormessage").show()
//if table is changed hide or show error depending if data was found
});
$(".Submit").on("click",function(){
return checkTable()
// if checkTable returns true, form submits if no other errors, or if false form will not submit
});
}); // end of document ready
function checkTable(){ // checkTable Function (returns if true if table contains any data)
var tableRowsWithData = 0
$(".myTable table tbody input").each(function(){ //loop over table inputs
if ($(this).val()) tableRowsWithData += 1 // if data found add 1 to count
});
if (tableRowsWithData) return true; // if data found return true
else {
$(".tableerrormessage").show()
return false;
} // no data found show error and return false to prevent submit
}