Meta Box

MB jQuery Validation - Scroll To Highlight Error - WYSIWYG Issue

Support › MB Frontend Submission › MB jQuery Validation - Scroll To Highlight Error - WYSIWYG IssueResolved

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 14, 2024 at 8:24 PM #44290
    CodogCodog
    Participant

    Hi there,
    I use the MB jQuery validation for many fields in my frontend submission form. After the "Submit" button is clicked and fields have missing or invalid data, the page scrolls up to show where errors have occurred and highlights them - which is great.

    This works fine on ALL fields except for the WYSIWYG custom field? When clicking "submit" and ONLY the WYSIWYG field is empty, NO scroll (to the error) action takes place. The "rwmb-error" class is shown below the field. This is problematic as I have a fairly lengthy form and the user has to scroll back up to locate the issue.

    I am only using the 'required' => true, validation attribute on the WYSIWYG field. I see no errors in the browser console or in my error log file when this is triggered?

    Is this a bug? I would very much like to solve this problem.

    I look forward to your response?

    Thanks in advance 🙂

    January 15, 2024 at 10:04 PM #44298
    PeterPeter
    Moderator

    Hello,

    Currently, Meta Box supports scrolling to the input field if the setting required = true and the field is empty. For the WYSIWYG field, the input field textarea will display if you switch to tab Text and you can see the browser scrolling to the field as well.

    January 15, 2024 at 10:49 PM #44301
    CodogCodog
    Participant

    Hi peter,
    When you say....

    For the WYSIWYG field, the input field textarea will display if you switch to tab Text and you can see the browser scrolling to the field as well.

    Q) Are you suggesting I switch to using a 'textarea' or 'text' custom field type instead of the 'wysiwyg'? Because this allows for the scrolling to the field on error?

    Although I appreciate switching field type will fix the scrolling issue you are effectively asking me to reduce the functionality I wish to provide to my users? I need the WYSIWYG to allow my users to format their posts?

    Have I understood you correctly?

    January 16, 2024 at 8:49 PM #44307
    PeterPeter
    Moderator

    Hello,

    No, I don't suggest using the textarea or text field. I mean the tab Text of the WYSIWYG field, screenshot https://imgur.com/MS48uVF

    It is the input field textarea of the WYSIWYG field, the Visual tab hides the input field and the validation doesn't jump to the input field as you see.

    January 17, 2024 at 9:34 PM #44317
    CodogCodog
    Participant

    Hi Peter,
    thanks for clarifying. So I can see that when activating the text tab via the WYSIWYG options[] setting 'quicktags' => true that indeed the field is scrolled to when empty.

    The problem is that I DO NOT want my users to use the "text" tab as arbitrary HTML can be added here?

    A Hack (for anyone else using WYSIWYG Custom Field with NO TEXT TAB ONLY)
    ==========================================================================

    It is possible to trick scroll to validate field on the WYSIWYG.... it's a hack! But tested and works.

    In your SAAS add the following:

    .rwmb-input{
    .wp-editor-container{
      iframe{
        // Set to your preferred height
        min-height:200px;
      }
      textarea{
        &.rwmb-wysiwyg-required{
          display: block !important;
          height: 0px !important;
          padding:0;
          border:none;
      }
    }
  }

    What this does is force the <textarea> (the bit the validation needs to scroll up to) to be displayed but be visually hidden.

    January 20, 2024 at 10:38 PM #44357
    PeterPeter
    Moderator

    Hello,

    Thanks for sharing the workaround. I've escalated the issue to the development team to improve the scrollable feature for this field in future updates.

    January 22, 2024 at 1:10 AM #44363
    CodogCodog
    Participant

    Hi Peter,
    no probs... hacky... but works. Yeah, be nice to see this added as a feature to the validation methods.

    Cheers 🙂

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.