Skip Navigation

[Résolu] CRED error messages dont cause the page to scroll up

This support ticket is created Il y a 2 années et 9 mois. 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 4 réponses, has 2 voix.

Last updated by jeffS-2 Il y a 2 années et 9 mois.

Assisted by: Waqar.

Auteur
Publications
#2076739

Tell us what you are trying to do?
Using cred_validate_form, on error, the page doesn't scroll up to make the error visible at the top of form.

Is there any documentation that you are following?
Documentation for CRED API: cred_validate_form.

What is the link to your site?
hidden link
(Form still in progress, so please excuse the misalignment of some fields and labels.)

To duplicate:
Go to above page. Fill in bogus information (all fields are required – sorry.)
Under <b>Rate the strength (1–10)</b> enter 11, continue to fill in form and Submit.
The form does not submit because of the error, and the message is displayed at the top of form, but the form does not scroll to the top. So the visitor has no idea what happened. I came across this issue like 2 or 3 years ago. Hopefully, something I forgot to do.

Thanks,
Jeff
–––––––

#2077023

Waqar
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Jeff,

Thank you for contacting us and I'd be happy to assist.

Your observation is correct and if the form is set to submit using AJAX and some validation is performed through the "cred_form_validate" hook, the form doesn't automatically scroll to the errors on the top.

There two ways you can approach this:

1. You can move the "Form messages" field right above the submit button field, which will show any form errors just above the submit button and not at the top of the form. This way the user won't need any scrolling to see the errors.

OR

2. If you'd like to keep showing the forms errors at the top and scroll to those errors, you can include the following script in the form's JS editor:


jQuery( document ).on( "ajaxSuccess", function() {
  if(jQuery('form.cred-form .wpt-form-error').length > 1) {
    jQuery('html, body').animate({
      scrollTop: jQuery("form.cred-form .wpt-top-form-error").offset().top
    }, 1000);
  }
});

I hope this helps and please let me know how it goes.

regards,
Waqar

#2077387

Hey, Waqar – How are you?

Thanks for these 2 possible solutions. I could not get the jQuery to work. However, I think it is better to immediately show the error message above the Submit button, so I moved it to there.

This is really a temporary fix anyway, as I will post a new request for documentation on how to use the optional settings for [cred_field ...]. I would like to limit the number of characters as well as the entered value (1–10) for a numeric field, but cannot find documentation on that.

What happened to the legacy documentation for this stuff? Every time I look for documentation, the results show me the video lessons based on blocks. I am not using blocks. This website is 6 years old, works fine, and I am not about to start using blocks with it. Please pass along this message.

Thanks,
Jeff Safire
––––––––––

#2079231

Waqar
Supporter

Languages: Anglais (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for writing back.

You'll find the documentation on Toolset Forms shortcode at:
https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred_field

To find the documentation and guides on the legacy features and workflows, you can either use the "Materials for legacy features" link on the main documentation page ( https://toolset.com/documentation/ ) or the search field in the Toolset website's header.

Note: There are no built-in attributes available with the field's shortcode to validate the numerical value or the number of characters, so you'll need some additional custom script for that too. You're welcome to start a new ticket with more details, to get some pointers.

#2081033

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.