In a table when a hidden field is empty have a parsley error triggered on a second field

asked on February 18, 2021 • Show version history

I have a table (named invoiceInformationTable) with single line field (named bpNumber) the user can type whatever they wish in it. Then based on this value I used a lookup to fill a hidden field (named bpTestField). What I want to be able to do is create a custom error on the single line field (bpNumber) that is trigged when the hidden field (bpTestField) is empty. I have tried to make a custom parsley error, but so far have been unable to get it working.

The reason I’m not using a drop down and forcing the user to pick valid values, is because the look up is too large and my form will freeze.

I'm including my code, but it's mostly just alerts testing to see if I'm getting the correct values to check.

validateBPNumber() is not even close.. it just need to check if empty or not. Currently it always sends back true.

/*******************************************************************************/
/*   START: initial Set up custom error message and checking for moved fields  */
/*******************************************************************************/
function validateBPNumber(thefield)
{
 // alert('got here validateBPNumber');
  //alert('got here field: '+ thefield.val() );
  
//  if(value > 10 && value < 100)
//  {
    return true;
//  }
//  else
//  {
//    return false;
//  };
};

function addValidator ()
{ 
  
  $('.bpNumber input').each(function() {
    //alert('found one');
    var attr = $(this).attr('data-parsley-bpnumbervalid');
    if (typeof attr == typeof undefined || attr == false) {
    	$(this).attr('data-parsley-bpnumbervalid','');
	}; 
  }); 

};

/*******************************************************************************/
/*   END: initial Set up custom error message and checking for moved fields    */
/*******************************************************************************/


$(document).ready (function () {

  /*******************************************************************************/
  /*    START: final Set up custom error message and checking for moved fields   */
  /*******************************************************************************/  
  window.Parsley.addValidator('bpnumbervalid', {
    validateString: function(value, requirement, field) { 
 //   validateString: function(value) { 
  //    alert('the $(field) ' + $(field).val );
      var bpNum = $('.bpNumber input').val();
      var bpDesc = $('.bpTestField input').val(); 
       var test = field.$element.siblings('.bpTestField');
      alert('test ' + test.val());
      return validateBPNumber(bpDesc);
   //   return validateBPNumber($(field));
      
    },
    messages: {
      en: 'Needs to be a valid BP Number'
    }
  });
  
  addValidator();

  
  
  $(document).on('click','.cf-table-add-row',function() {
    addValidator();
  });
  
  /* force validation on blur event */
  $('.bpTestField').change(function(){
    $('.bpNumber input').parsley().validate(); 
  });  
    
  /*******************************************************************************/
  /*     END: final Set up custom error message and checking for moved fields    */
  /*******************************************************************************/
  
});

0 0

SELECTED ANSWER

replied on February 18, 2021

This is NOT coded to be used in a table, it would need to be modified to address that, but here's a simple script that adds a validation to field #q1 that checks if field #q2 is blank.

I have it checking the validation on field #q1 when field #q2 changes, but you would probably want it to trigger that based on the lookup complete event.

Hopefully this at least gets you pointed in the right direction.

$(document).ready(function () {
  
  window.Parsley.addValidator('partner', {
    validateString: function(value) {
      return ($('#q2 input').val() != '');
    },
    messages: {
      en: 'Hidden field is blank!'
    }
  });
  
  $('#q1 input').attr('data-parsley-partner', '');
  
  $('#q2 input').change(function(){
	$('#q1 input').parsley().validate();
  });
  
});

1 0

View 4 previous replies

replied on February 19, 2021 • Show version history

First I want to say thanks for your post as it did help and I think I'm on the right path now... just not all the way to the end.

With the code below it only works correctly for the first row of the table.

The alert value I get back on the first row is : 'lookup complete for bpNumber Field34(1)'

While the second row returns: 'lookup complete for Field34(2)'

And even if it leave off the check for "event.triggerId" and just make the call of "$('.bpNumber input').parsley().validate();" it still only works correctly on the first row.

If after entering data in the second row and tabbing out I get an error at first no matter if it's correct, until i go back into the field and tab out a second time without changing the data(correct) then it clears the error. This seems to show that it is not checking the data after the lookup has ran on that second row in the table.


/*******************************************************************************/
/*   START: initial Set up custom error message and checking for moved fields  */
/*******************************************************************************/
function validateBPNumber(thebpvalue, thefield)
{
  if(thebpvalue == '')
    return true; /* no need to validate if the required attribute will trigger */
  else 
  {
    return (thefield.val() != '');
  };

};

function addValidator ()
{ 
  
  $('.bpNumber input').each(function() {
    //alert('found one');
    var attr = $(this).attr('data-parsley-bpnumbervalid');
    if (typeof attr == typeof undefined || attr == false) {
    	$(this).attr('data-parsley-bpnumbervalid','');
	}; 
  }); 

};

/*******************************************************************************/
/*   END: initial Set up custom error message and checking for moved fields    */
/*******************************************************************************/


$(document).ready (function () {
 
  /*******************************************************************************/
  /*    START: final Set up custom error message and checking for moved fields   */
  /*******************************************************************************/
  
  window.Parsley.addValidator('bpnumbervalid', {
    validateString: function(value, requirement, field) { 
      
      var testField = field.$element.closest('tr').find('.bpTestField input');
     
      return validateBPNumber(value, testField);     
     
    },
    messages: {
      en: 'Needs to be a valid BP Number'
    }
  });
  
  addValidator();
  
  /* the following is needed because the data being validated is in a table row */
  $(document).on('click','.cf-table-add-row',function() {
    addValidator();
  });
  
 
  
  /* validate after the lookup is complete so that bpTestField be filled with the result */
  $(document).on('lookupcomplete', function(event){

    if (event.triggerId===$('.bpNumber input').attr('id')) {
      $('.bpNumber input').parsley().validate();
      alert('lookup complete for bpNumber ' + event.triggerId); 
    }
    else
    {
      alert('lookup complete for ' + event.triggerId); 
    };
    
   
  });  
  
  /*******************************************************************************/
  /*     END: final Set up custom error message and checking for moved fields    */
  /*******************************************************************************/
});

0 0

replied on February 19, 2021

I'm guessing your table only has one row initially when the form is loaded - so the Javascript to add the validator is only running on that one row.

Try adding some code to run your addValidator() function on either any change to your table or after the link is clicked to add a row to the table.

Something like one of these:

$('.cssClassNameOfTable').change(function(){
  addValidator();
});

$('.cf-table-add-row').click(function(){
  addValidator();
});

1 0

replied on February 19, 2021

I think my lines 55 - 57 should be doing the same as your second option, but I will swap them out and see what happens. Thanks!

1 0

replied on February 19, 2021

Oh, you're right - I completed missed that bit of the code - that should be adding it when the rows are added. 🤔

0 0

replied on February 19, 2021

I swapped out my lines for your lines 5-7 and then also changed my lookupcomplete to the following because it to only get past the if statement for the first row. It seems to be working as intended now. I'm going to do some more testing just to make sure but I think it's good to go now.

I also tested with my old lookupcomplete and your lines and it also seemed to work as well, but was of course not getting a match for my if statement. Maybe my old " .cf-table-add-row " was not just right a missing ) maybe.. some little syntax issue.

Thanks for all your help, I appreciate it!

/* validate after the lookup is complete so that bpTestField be filled with the result */
  $(document).on('lookupcomplete', function(event){
    
    var strTriggerID = event.triggerId;
    var strTriggerIDPart = strTriggerID.substring(0, strTriggerID.indexOf('(')); 
    
    var strBPNumberID = $('.bpNumber input').attr('id');
    var strBPNumberPart = strBPNumberID.substring(0, strBPNumberID.indexOf('(')); 

    if (strTriggerIDPart===strBPNumberPart) {
      $('.bpNumber input').parsley().validate();
    }; 
   
  });

0 0

replied on February 19, 2021 • Show version history

I was just about to reply - I put your code (the full code from two hours ago) into a simple test form myself, and the only issue I had was with the validation triggering on lookup complete - it seemed to only be triggering the first row at that time. I changed to this code to validate every row of the bpNumber fields each time the lookups completed, and it seemed to work:

  $(document).on('lookupcomplete', function(event){

    $('.bpNumber input').each(function() {
      $(this).parsley().validate();
    });    
   
  });

1 0

replied on February 19, 2021

I have several look ups on the form, that trigger after the first form load so I wanted to be able to only validate when needed. I'm not completely content with my lookupcomplete and might combine both of ours. I think it would be better if I could target only the row that had the lookup updated, but sometimes I follow... 'if it works don't fix it' motto.

0 0

Question

Question

In a table when a hidden field is empty have a parsley error triggered on a second field

Answer

Replies

Sign in to reply to this post.