jQuery - Check empty inputs works but only checks first row in table

Question

I have a table with cells that contain inputs, textareas and selects, and I've used a function to check that the values of these are not empty, which works fine for the first row, but doesn't perform the check for each row in the table, even though I've selected the inputs via the row class they are within (example: $('tr.invoiceItems input').

Any idea how I could ensure that this passes over each row in the table and not just the first?

HTML for first row (using Handlebars templating). Automatically added on page load before others inserted:

{{#each Items}}

    

        {{Id}}

        

            

        

        

            

        

        

            

        

        

            

        

        

            

        

        

            

        

        

            

        

        

            

        

        

            

        

        

            

                

            

        

    

    {{/each}}

HTML for additional rows added later on click handler:

JS:

$('#saveInvoice').click(function(e) {
    e.preventDefault();
    var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ];
    var $emptyFields = $fields.filter(function(element) {
        return $.trim(element.val()) === '';
    });
    if (!$emptyFields.length) {
        saveInvoice();
    } else {
        alert('Unable to save invoice. There are incomplete item fields.');
    }
});

Gokulan P H · Accepted Answer

Try replacing your script with this it should work.

   $('#saveInvoice').click(function(e) {
            e.preventDefault();
             var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ]
            var $emptyFields;

            for(var i=0;i< $fields.length;i++){
            $emptyFields = $fields[i].filter(function(i,element) {
                return $.trim($(this).val()) === '';
            });
            if ($emptyFields.length) 
            break;
            }
            if (!$emptyFields.length) {
              saveInvoice();
            } else {
                alert('Unable to save invoice. There are incomplete item fields.');
            }
        });

Working Fiddle here: https://jsfiddle.net/20fsvkjg/

jQuery - Check empty inputs works but only checks first row in table

Answers (1)

Related Questions