Skip Navigation

[Resolved] Post Edit Form Duplicating Body Contents When Validation is Triggered

This support ticket is created 2 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 27 replies, has 3 voices.

Last updated by Nigel 2 years, 6 months ago.

Assisted by: Shane.

Author
Posts
#2335943
Screenshot (29).png
Screenshot (28).png
Screenshot (27).png

Tell us what you are trying to do?

Use custom validations on a post edit form.

Is there any documentation that you are following?

https://toolset.com/documentation/programmer-reference/cred-api/#cred_form_validate

I have some custom validations that trigger across multiple different forms (as they all serve slightly different purposes but from the same root data). The validations work perfectly and trigger correctly across each of the forms, but the default edit form is acting very strangely. When the validation triggers, the form duplicates itself underneath the original form!

I know this sounds really strange, so I've attached some screenshots of the Edit form as it's supposed to look (screenshot 27), then the Edit form after a validation trigger with the resulting issue (screenshot 28), and finally another form with the same validation triggering so you can see it behaves normally (screenshot 29).

Here is the code for the edit form:

[credform]
[cred_field field='form_messages' class='alert alert-warning']
<div class="form-group">
  <div class="row">
    <div class="col-md-6">
      <label for="%%FORM_ID%%_school-term">[cred_i18n name='school-term-label']School Term[/cred_i18n]</label>
      [cred_field field='school-term' force_type='field' class='form-control' output='bootstrap']
    </div>
    <div class="col-md-6">
      <label for="%%FORM_ID%%_term-year">[cred_i18n name='term-year-label']Term Year[/cred_i18n]</label>
      [cred_field field='term-year' force_type='field' class='form-control' output='bootstrap']
    </div>
  </div>
</div>
<div class="form-group">
  <div class="row center-calendars">
    <div class="col-md-6">
      <label for="%%FORM_ID%%_term-start-date">[cred_i18n name='term-start-date-label']Start Date[/cred_i18n]</label>
      [cred_field field='term-start-date' force_type='field' class='form-control' output='bootstrap']
    </div>
    <div class="col-md-6">
      <label for="%%FORM_ID%%_term-end-date">[cred_i18n name='term-end-date-label']End Date[/cred_i18n]</label>
      [cred_field field='term-end-date' force_type='field' class='form-control' output='bootstrap']
    </div>
  </div>
</div>
<div class="form-group token-end-layout">
  <div class="row center-calendars">
    <div class="col-md-6">
      <label for="%%FORM_ID%%_term-token-end-date">[cred_i18n name='term-token-end-date-label']Token End Date (Optional)[/cred_i18n]</label>
      [cred_field field='term-token-end-date' force_type='field' class='form-control' output='bootstrap']
    </div>
    <div class="col-md-6">
      Currently updating the Token End Date will only affect <strong>newly created tokens</strong> and will not cascade to existing ones.
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    [cred_field field='form_submit' output='bootstrap' value='Save' class='btn btn-primary btn-lg btn-block']
  </div>
  <div class="col-md-6">
    <button type="button" class="btn btn-secondary btn-lg btn-block" data-dismiss="modal">Cancel</button>
  </div>
</div>
[/credform]

Here is an example piece of validation code as demonstrated in the screenshots (I've left off the function declaration and hook call, but it's standard):

//** Validation for New Term form OR Edit Term form OR Edit Term Token End Date form **//
  if( $form_data['id'] == 446 || $form_data['id'] == 732 || $form_data['id'] == 1912 )
  {

    if( $form_data['id'] == 446 ) {
      $term_end_date = $fields['wpcf-term-end-date']['value']['datepicker'];
    } else {
      $term_end_date = get_post_meta( get_the_ID(), 'wpcf-term-end-date', true );
    }

    /* Validation - Check the Token End Date comes after the Term End Date */
    if ( $fields['wpcf-term-token-end-date']['value']['datepicker'] != NULL && $fields['wpcf-term-token-end-date']['value']['datepicker'] < $term_end_date )
    {
      //Token End Date error message
      $errors['term-token-end-date'] = 'Token End Date must be greater than or equal to the Term End Date of ' . date( 'd/m/Y', $term_end_date );
    }
  }

I'm completely baffled by this behavior and can find absolutely nothing wrong anywhere, nor can I find any errors being generated. I'd really appreciate some help figuring out why on earth it's doing this.

Many thanks.

#2336219

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dave,

Thank you for getting in touch.

I suspect this is being caused by the popup itself.

If you as a test take the form out of the popup window and test again does the issue still remain ?

It could be a case where the container is being reloaded in its new state without clearing the old one.

Please let me know.
Thanks,
Shane

#2336855

Hi Shane,

It looks like you're on the right lines as when I put the form on the page it does indeed behave properly. But I'm not sure where this leaves us (I'm hoping you do) as the form 100% needs to load in the modal.

Why would this one form be playing up though when every other form loads and validates properly? And how do we go about debugging this with no errors to work with?

#2337009

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dave,

Given the circumstances there isn't much that we can do in terms of debugging. What we can do is to mirror exactly one of the form/modal that works.

What I mean is that you copy the information from one view/modal where it is 100% working and then replace that form with the edit form.

Also are those other forms edit forms as well ? The other alternative is that we can employ the use of css to hide any other form that appears.

Thanks,
Shane

#2339137

Hi Shane,

Apologies for the slow response, it's the school holidays here.

I can't see that copying it around isn't going to help as all of the modals are generated using identical code, just changing the ID's and label assignments. This one is generated in the Loop Item of the post type archive, as I have done with every other post type like so:

<td><a href=[wpv-post-url]>[types field="school-term"][/types] [types field="term-year"][/types]</a></td>
<td>[term-days]</td>
<td>[exclusion-days]</td>
<td>[gym-days]</td>
<td>
  <div class="button-row">
  	<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#editTermModal-[wpv-post-id]">Edit</button>
  	[wpv-view name="terms-exclusions"]
  </div>
</td>

<!-- Edit Term Modal -->
<div class="modal fade" id="editTermModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="editTermModalLabel-[wpv-post-id]" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editTermModalLabel-[wpv-post-id]">Edit Term</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        [cred_form form="edit-term"]
      </div>
    </div>
  </div>
</div>

Absolutely nothing out of the ordinary with this, and none of the other edit forms, even those that are generated identically, cause the same issue.

How can we go about checking the "state of the container" as you put it? That's sounding like you're suggesting a Bootstrap JS conflict or something along those lines. This seems to be the right direction as I've just tried turning off the AJAX submission on the form and although the page reloads, it generates the validation error but not the layout issue. So I think you're right, this is some weird JS / AJAX issue but I don't know how to probe it further as the console isn't giving me anything to work with (as in it's reporting nothing).

#2340495

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dave,

Thank you for the updated information.

My advice here given that this issue persists with AJAX is to either submit the form without the use of AJAX and allow the user to re-open the container if the verification fails or to rewrite your verification as javascript which will take some outside assistance given that our API doesn't use Javascript for validations.

How can we go about checking the "state of the container" as you put it?

When I say check the state of the container I meant that after the validation fails you can load some CSS that will hide the second form.

The second form will essentially be generated with the same css classes but thinking on it further this will affect the other forms on the page should the user.

Perhaps you may even need to try an alternative modal solution for this as well.

Thanks,
Shane

#2340801

Hi Shane,

I appreciate the advice you're offering here, but the problem is we're not actually talking about diagnosing and fixing what is clearly a bug somewhere, you're suggesting workarounds. This is fine for certain problems or quirks, but whatever is going on here is clearly unintended behavior that needs understanding so it can be dealt with, not hiding.

The AJAX is causing this error somehow, even though the validation is working properly. I do not have the time or ability to use JS to rewrite something that is working and shouldn't be generating an error such as this, I need to understand why this is happening and fix it. The modals are working perfectly everywhere else and if a Bootstrap modal isn't going to be a viable solution then the whole premise isn't sustainable, and given that Toolset loads Bootstrap, compatibility clearly isn't the problem.

Also, having the form close and reload before throwing an error is simply not an acceptable answer as it is severely clunky and when every other form is validating live it is simply not an option.

If you aren't sure how else to proceed, is there somewhere you can escalate this to please? I've been pulling the validation code apart but so far haven't found a trigger, but I haven't finished yet so I may yet find some more clues. But more detailed help diagnosing this issue that Toolset is having with its AJAX validation is really needed here.

#2341317

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dave,

Perhaps what I can do is to have a look at the site itself, if you provide me with the credentials and a link to the page with the issue I can have a look.

However as mentioned there isn't much I can do. I can escalate the issue to our 2nd tier team but we may not get a favourable response on this particular issue.

I've enabled the private fields on your next response.

Thanks,
Shane

#2342091

Hi Shane,

I've sent the details across so hopefully you may be able to spot something. But I have to admit I don't understand why you would expect an unfavorable response from 2nd tier regarding this, it's clearly a bug with the way Toolset is behaving.

Either way, I'll leave it with you for now as I haven't got time to work on this today and will keep my fingers crossed.

Thanks for taking a look.

#2348957

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dave,

I took some time to try to replicate your issue on a fresh install but wasn't able to. Take a look at the demo site below.
hidden link

This URL should allow you to log in. Once you've logged in go to the link below.
hidden link

I've set this up for the description custom field to fail if the text "test" isn't entered. When the validation fails the form still only displays one instance of the form.

So this is a clear indication that there isn't an inherent conflict with the bootstrap modal but the issue is unique to your instance only.

Thanks,
Shane

#2352099

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dave,

Were you able to have a look at the example that I've setup showing that the problem isn't replicable?

Thanks,
Shane

#2354275

Hi Shane,

Apologies for the slow response time, it's been bank holidays and school holidays, etc here in the UK so it's been crazy lately.

The sandbox seems to be no longer available or at least it's just loading a generic landing page, and that's my fault for being slow, but I take your point that you can't replicate it. I appreciate you have tried and can't seem to reproduce the issue.

This is incredibly frustrating as there is nothing in this install that should be causing such a weird AJAX conflict, so now I finally have the time I'm going to go back to pulling it apart and see if I can find something that either explains this or fixes it. If you could leave this thread open for me to update as I go and if there are any insights that can be offered to my findings etc, that would be very helpful as this is a really frustrating issue.

#2354439

Well, I'm getting nowhere with this. I've tested everything you'd expect to be having an effect on the form and nothing is making a difference. Here's everything I've tried:

Rebuilt the form, different ID,
Tested each validation function one at a time,
Rebuilt the modal code,
Deactivated all plugins except Toolset Types, Blocks and Forms,
Tried both the default theme, not my child theme, and 2021,

None of this made the slightest difference, the form keeps duplicating when using AJAX validation. This is driving me mad.

#2354713

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Dave,

I will be escalating to our 2nd tier team but would like to ensure that we've covered all the basic grounds. If you were to run the validation on a different field entirely does the same issue occur?

As mentioned I wasn't able to replicate on the sandbox. Unfortunately the sandbox would've only been available for 7 days and deleted if there isn't any activities on it.

Thanks,
Shane

#2354741

Hi Shane,

Thanks for this, I genuinely have no further clue how to proceed, so any further help will be gratefully received.

To answer your question any kind of validation on that form results in the duplication error occurring. It doesn't matter which field triggers it, it seems to be something to do with the validation running via the AJAX, regardless of the specifics of the validation. I've tested it on all four of the individual validations that are possible on that form at present, and they all run fine on other forms as they share the code.

No worries about the sandbox, like I said, that was on me. But from what you said there wasn't anything to see as outside of what you've said anyway.

Fingers crossed the 2nd tier team will be able to help me figure this out!