You are viewing limited content. For full access, please sign in.

Question

Question

Date Picker Error - JQuery

asked on October 22, 2019

I am hoping someone can help me with this error. I have a form that allows a user to schedule hearings for various "cases". The rows in the table are populated based on a lookup rule to a SQL table. I have added some JavaScript just for some cosmetic things (i.e. conditionally changing row colors, conditionally hiding the submit button, making fancy radio buttons) but nothing that should mess with the actual functioning of the form. I vigorously tested this process approximately a month ago and everything was fine. Now it's failing and I don't understand why. I commented out all of my JS and am still getting the following error upon submission:

I ran the debugger on the form and found that when the date pickers are clicked (in my form there are two), the console reports this error:

 

I am assuming the two errors are related. I looked on StackOverflow but I'm not a programmer so it's difficult to tell if the solutions provided there are relevant to my issue. Any help would be greatly appreciated!!!

0 0

Answer

SELECTED ANSWER
replied on October 22, 2019 Show version history

So the issue is the table. It is true that the field rules will ignore the required attribute of the field when it is hidden, but at the moment that particular functionality does not behave properly when the fields are within a table.

The issue you might have is that if you set a table column to "ignore" the value when hidden, it will often ignore ALL of the values in that column even if they are visible (this may be why you're getting the error).

I've worked around this behavior in two different ways.

Option 1

Use custom JavaScript to apply your own required attribute when the field is made visible instead of using the built-in required setting. The advantage here is that the field will not be flagged as required on the back end, but if it is visible the parsley validation will still apply and display the error if they try to submit without entering a value in the field.

Here is an example of the code I use to accomplish that

  // set location as required when status column is updated
  $('.reviewTable').on('change','.status select',function(e){
    // get the table row when the status column changes
    var row = e.target.id.match(/\d+/g)[1];

    // get the target field for that row
    var target = $('.location select').eq(row - 1);

    // make column required if visible
    target.attr('required',target.is(':visible'));
    
    // reset validation message if location is hidden
    if(target.is(':hidden')){
      target.val('').change();
      target.parsley().validate();
    }
  });

You could do this other ways. For example, you could just update every field in the column each time the table changes, but I prefer to only update the row that changed, especially when I have a lot of rows.

 

Option 2

Use the built-in required setting, but disable the backend validation. The problems with this approach is that you lose all of the backend validation entirely.

 

In either case, I think you'll need to Save the field values even when hidden to make it work properly, but it should be easy enough to test that before you determine if that is absolutely necessary.

0 0

Replies

replied on October 22, 2019

I would not expect these to be related. The message in your first screen shot is indicating that you have a field marked (called Name) as required that was submitted without a value.

Is the "Name" variable required on your form? If so, do you have any rows with no value in that field/column when you attempt to submit?

Typically the client-side validation catches instances of required fields that are not filled in, but sometimes hiding columns/fields or making them read-only can cause it to behave unexpectedly.

0 0
replied on October 22, 2019

Thanks for your reply Jason.

I have three sections of the form that only display when their associated radio button is selected (the three buttons at the top). I am just using the regular field rules to accomplish this. There is a field called 'Name' in one of the other sections but not the section that is visible in my screenshot. My understanding was that for fields that are conditionally hidden/shown using field rules, the required attribute is only "active" when the field is shown? Maybe I'm misunderstanding how that works? Why would it allow me to click Submit if a required field is empty? In my other forms, it redirects the user to the required field if it is empty. Is that what you were referring to when you mentioned client-side validation? 

Sorry for the million questions... I appreciate your assistance!!

0 0
SELECTED ANSWER
replied on October 22, 2019 Show version history

So the issue is the table. It is true that the field rules will ignore the required attribute of the field when it is hidden, but at the moment that particular functionality does not behave properly when the fields are within a table.

The issue you might have is that if you set a table column to "ignore" the value when hidden, it will often ignore ALL of the values in that column even if they are visible (this may be why you're getting the error).

I've worked around this behavior in two different ways.

Option 1

Use custom JavaScript to apply your own required attribute when the field is made visible instead of using the built-in required setting. The advantage here is that the field will not be flagged as required on the back end, but if it is visible the parsley validation will still apply and display the error if they try to submit without entering a value in the field.

Here is an example of the code I use to accomplish that

  // set location as required when status column is updated
  $('.reviewTable').on('change','.status select',function(e){
    // get the table row when the status column changes
    var row = e.target.id.match(/\d+/g)[1];

    // get the target field for that row
    var target = $('.location select').eq(row - 1);

    // make column required if visible
    target.attr('required',target.is(':visible'));
    
    // reset validation message if location is hidden
    if(target.is(':hidden')){
      target.val('').change();
      target.parsley().validate();
    }
  });

You could do this other ways. For example, you could just update every field in the column each time the table changes, but I prefer to only update the row that changed, especially when I have a lot of rows.

 

Option 2

Use the built-in required setting, but disable the backend validation. The problems with this approach is that you lose all of the backend validation entirely.

 

In either case, I think you'll need to Save the field values even when hidden to make it work properly, but it should be easy enough to test that before you determine if that is absolutely necessary.

0 0
replied on October 22, 2019

The Name field in the hidden section is not part of a table but it is within a collection. I believe those types of "repeatable" fields work similarly? I also have hidden columns in the hearing schedule table but I don't currently have them marked as required. But I see your point about assigning the required attribute to the visible columns using JS. I will definitely pocket that solution! 

In any case, I tested your second option first since it was the easiest/quickest to implement just to see what would happen. The form stopped generating the error after clicking Submit (yay!). I am still getting the Uncaught Error in the console when clicking on the date picker but it doesn't stop the form from functioning. Like you said, it must be a separate issue. The workflow that is in place fired upon submission and everything seems to work as intended now. I am going to see if I can research what repercussions there are to disabling the backend validation. I'm not entirely sure that I understand how the validation process works. 

Thank you so much for your help!!

0 0
replied on October 22, 2019

The same type of code should work for collections as they do share enough structural similarities. I try not to write code that relies specifically on table elements to make the components interchangeable with collections (i.e., it just uses indexes instead of looking at table rows).

 

The main risk when disabling backend validation is that invalid data could “potentially” slip through if something goes wrong wrong client side validation.

The backend validation makes sure the submission data is all valid on the server side before allowing the submission through.

Front end validation on the other hand is only occurring on the client side browser so it can be less reliable at times.

1 0
replied on October 22, 2019

Thank you for the insight! I will look into the needs of this process to see if the backend validation is critical. Hopefully I can get away with the "easy" solution :P

Thanks again!

0 0
replied on October 22, 2019 Show version history

I've disabled backend validation on several forms. It really depends oh how critical the process is and what impact there would be if something did happen to slip through the cracks. Honestly, it has been incredibly rare, but the possibility still exists.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.