Scroll to Error Message instead of Top of Page when missing Required Fields

[Sundco Team]

Modern Tribe Support,

We’ve been using the Community Events plugin for about two years. But it has a problem for users on laptops. When a required field isn’t filled in and they click submit, the form scrolls to the top of the *page*, whereas the error messages are displayed at the top of the *form*. On most laptops, those error messages are below the fold. Many people don’t notice the error messages, because they’re off the screen to the bottom, and they think they successfully submitted the event.

I’ve attached two screenshots – one showing what many laptop users see, and the second showing what larger screen desktop users see.

Is there a way the Community Events form, when there are error messages, can scroll to the error messages or top of the form instead of top of the page? It will make a big difference for users submitting events from laptops.

Thank you,

Mark Sund, Studio Director, Sund + Co (Cincinnati USA)

[Victor]

Hi Mark!

Thanks for getting in touch with us! Let me help you with this topic.

You could achieve what you are looking for with some custom coding.

Do note that we are fairly limited in how much support we can give for custom development questions like that.

That said, we always like helping out and at least point users into the right direction as much possible.

Would it be a solution to show the error messages right below the “Submit an Event” title ? If so, that could be accomplished with a fairly simple template override.

You can learn more about template overrides in our Themer’s Guide > https://theeventscalendar.com/knowledgebase/themers-guide/

If you think that could work for you, let me know and I’ll be happy to help you accomplish that.

Best,
Victor

[Sundco Team]

Victor,

Thank you for suggesting we move the error messages up higher on the page. That would help, but the only way I can see to do that is move this

<?php wp_nonce_field( 'ecp_event_submission' ); ?>

up and outside the form. See attached. When I do that, clicking submit yields a white page that says “The link you followed has expired”. So it appears we can’t move the post-submission message block higher on the page.

The real problem is when someone clicks Submit, the page shouldn’t scroll to the *top*. It should scroll to the *ecp_event_submission* block. Then the post-submission (or attempted submission) messages won’t be below the fold on laptops.

Is there a way to make one of these happen? Thank you,

Mark

[Victor]

Hi Mark,

Thanks for following up with this topic.

I agree with what you say about scrolling to the error messages to prevent this problem.

I have logged a feature request report for this so it can be taken into account in a future version of our plugin. I will link this thread to the report, so we can keep you posted.

The line of code you were trying to move is not the error messages. I’d suggest you make a template override of the header-links.php template file located at /wp-content/plugins/the-events-calendar-community-events/src/views/community/modules/ directory.

In there you will find the following line of code that holds the function to echo the error messages:

echo tribe_community_events_get_messages();

You can move that code to before the header tag to make the validation errors show up at the top of the page.

I hope that helps. Let me know about it.

Best,
Victor

[Sundco Team]

Victor,

Thank you for submitting a feature request for this.

Also thank you for pointing out the php code that displays the messages. I didn’t notice it in that file before! It turns out moving it above the header block doesn’t help. We’re already hiding the header block (display none). The messages need to go above our content on the page (vobc-before-content and vobc-submission-content).

(I attached a browser code screenshot if you want to see, but I don’t think there’s a way to move those messages up where we need them.)

Thank you for pointing me to the code that writes those messages, because before I was just perplexed! And thank you for putting in the feature request.

Mark

Mark Sund | Kitchen Manager + Studio Director
Sund + Co | 115 Main Street | Milford OH 45150 | Cincinnati USA
http://www.sundco.com

[Sundco Team]

Hey you-all, I marked my reply as Correct Answer, but I didn’t mean to, and now I can’t figure out how to undo that!

[Victor]

Hi Mark,

Thanks for following up with this.

Don’t worry about the correct answer, I have unmarked it.

(I attached a browser code screenshot if you want to see, but I don’t think there’s a way to move those messages up where we need them.)

I’m not able to see the screenshot you mention. Please bear in mind that files sent via email won’t make it to the help desk topic. You will need to reply using the frontend form.

Please let me know about that code so I can have a look and see if I can help you further with this.

Thanks,
Victor

[Rafsun Chowdhury]

Hi Mark,

Just wanted to share with you that a new release of our plugins is out which includes a fix for the issue discussed here.

Find out more about the release here → https://theeventscalendar.com/maintenance-release-25-february-2019/

We appreciate your patience while we worked on this.

As always, we suggest to set up a dev/staging site so you can make all plugin updates without disrupting the live site.
Please update the plugins if you haven’t done already and let us know if the fix works for you. Don’t hesitate to open a new ticket if something comes up.

Kind Regards,
Support Team

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts