jQuery adaptive form validation

Question

I have a dynamic form that I need to validate user side. I don't require that they fill out every part of the form, but if they fill out one column of a row, then they have to fill out the remaining columns. For example, if they fill out the CC #, they are required to also fill out the amount, approval, and the date, but if they don't fill out anything, then they're free to click on 'next'. This is to ensure that all the required information is gathered. Any suggestions on how I can do this?

To save space, I've put the code on JS Fiddle. This is just to show what type of format my form/table is in.

http://jsfiddle.net/8z3Sy/

Answer 1

One idea is, on your click event compare the # of fields with the # of empty fields for each row.

var fields = $(this).find('td input').length; 
var filled_fields =  $(this).find('td input:text').filter(function() { return this.value != ""; }).length; 

if (fields == filled_fields || filled_fields == 0) 
{
    //Continue on with the next table (all row data is filled out OR all row data is empty)
}
else 
{
    //There is a field missing on the pertaining row
    //Stop Propagation
}