[Resolved] CRED error messages dont cause the page to scroll up

[Author]

Posts

[jeffS-2]

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
–––––––

[Waqar]

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

[jeffS-2]

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
––––––––––

[Waqar]

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.

[jeffS-2]

My issue is resolved now. Thank you!