How to validate each row of table?

asked on February 2, 2016

Hello,

I'm working on this question, and may be making some progress. My code currently is:

$(document).ready(function () {
  

   $('.cf-table-block tbody tr').on('change input','input[id^=Field16], .SCCheck input', function() {
    	if (!this.value) return;
    	if ($('input[id^=Field16]').val() == $('.SCCheck input').val()) {
           $('.Submit').prop('disabled',false);
        } else {
           $('.Submit').prop('disabled',true);
        }
  }).find('input.Submit').prop('disabled',true);
  
});

$(document).ready(function () {
  
  $('.read-only input').attr('readonly',true);
  
  $('.cf-table-add-row').click(function () {
    $('.read-only input').attr('readonly',true);
    
  });
  
});

This checks the Lot Check (hidden) field against the Stock Code Check (hidden) field. If they match, the submit button is enabled. If not, it is disabled. The problem I am running into is that it only validates the first row of the table. I need it to check each row, and if even one is wrong, I need the submit button to be disabled (and ideally a message to let the user know which Lot # is not matching). A screenshot is attached. Any help is greatly appreciated.

Thanks

LC.JPG (22.07 KB)

| Download

0 0

replied on February 2, 2016

Try this code (untested):

$(document).ready(function () {
  
  $(document).find('.cf-table-block tbody tr').on('change input','input[id^=Field16], .SCCheck input', function() {
  	if (!this.value) return;
    var b = true;
    $(this).closest('tr').siblings().each(function() { //or you could just type it out like so $('.cf-table-block tbody tr').each(function() {
    	if ($('input[id^=Field16]',this).val() == $('.SCCheck input',this).val()) b=false;
    });
    $('.Submit').prop('disabled',b);
  }).end().find('input.Submit').prop('disabled',true).end().find('.read-only input').attr('readonly',true).end().find('.cf-table-add-row').on('click',function() { //by the way, this line was not working when the form was loading cause you were searching inside the table block
    $('.read-only input').attr('readonly'true); //optionally could be $('.read-only input',this).attr('readonly',true);
  });
  
  //$('.read-only input').attr('readonly',true); these lines were included above (love function chaining)
  
  //$('.cf-table-add-row').click(function () {
  //  $('.read-only input').attr('readonly',true);
  //});
  
});

I consolidated some of the code just for fun. Let me know if that works. I'll look into your other question as well.

0 0

replied on February 2, 2016 • Show version history

Chris,

This doesn't seem to be working. Additionally, I had this code:

$(document).ready(function(){
  $(document).on('change', '.ObjectivesColor input', function(){
    if ($(this).val() == 'Pass'){
      this.setAttribute('style', 'background-color: green !important');
    }
    else if ($(this).val() == 'Fail'){
      this.setAttribute('style', 'background-color: red !important');
    }
    else if ($(this).val() == 'Undetermined'){
      this.setAttribute('style', 'background-color: #fcc72e !important');
    }
    else {
      $(this).css('background-color', 'white');
    }
  });
});

$(document).ready(function(){
  $(document).on('change', '.ObjectivesColor input', function(){

    if ($(this).val() == 'Pass'){
      $(this).css('color', 'white');
    }
    else if ($(this).val() == 'Fail'){
      $(this).css('color', 'white');
    }
    else if ($(this).val() == 'Undetermined'){
      $(this).css('color', 'white');
    }
    else {$(this).css('color', 'black');}
  });
});

Which changed the color of the field and text within the "Pass/Fail" column based on the returned result. This no longer works.

But if you're taking a look at the other question, I'd rather have that one answered because it is the end result I'm working toward.

Thanks!

0 0

replied on February 8, 2016

Chris,

Have you by any chance had an opportunity to look at my other question?

Thanks

0 0

Question

Question

How to validate each row of table?

Replies

Sign in to reply to this post.