change the collapsed tab color when there’s an error inside

  • Resolved vitoradler

    (@vitoradler)


    4 years, 2 months ago

    I got an very long form on my site and I want to change the tab color whenever there’s an invalid field inside it. Now i’m trying to use the following code:

    <script>
    document.addEventListener( ‘wpcf7invalid’, function( event ) {
    $(“div”).ui-accordion-header-collapsed.css({“background-color”:”red !important”,”color”:”white !important”});
    }, false );
    </script>

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    The page you linked is a using a slider form, so I am not sure what tab you are talking about.

    Thread Starter vitoradler

    (@vitoradler)

    Oh, sorry, i forgot to mention that the form I’m talking about is only available on the mobile version.

    Thread Starter vitoradler

    (@vitoradler)

    Here’s an example of what I want to do.
    https://drive.google.com/file/d/1CUuYJSps9Z7NSHmJlaaI-FySDTaV0EBi/view?usp=sharing

    Plugin Author Aurovrata Venet

    (@aurovrata)

    Here’s an example of what I want to do.

    currently you would need to implement it yourself, find the closest collapsible section of an invalid field and add a class or style it to highlight it.

    However, I think this is a good idea for implementation in the actual plugin.

    If you are not in a hurry, I will implement it in a few days.

    Thread Starter vitoradler

    (@vitoradler)

    That sounds great! By now I’ll try to do it myself but as I’m no specialist at codding I’m totally looking forward your update.

    Thread Starter vitoradler

    (@vitoradler)

    Hello @aurovrata! I saw your update and it was really amazing but just one thing, when there’s an error in more than one tab in a multi tab accordion (my site for example), the error only appears on the first wrong tab. The others remains the same till the user correct the first tab and click on send again, only then the error indicator appear on the next incorrect filled tab.

    Thread Starter vitoradler

    (@vitoradler)

    And just one more other thing, on the slider form you can see errors in all the sliders, but just one at time, so if there is an error on the first slide and on the last slide, he probably wouldn’t go to fix the first slider to fix it at the first try. Is it possible to do something like this ↓

    https://drive.google.com/file/d/1WLFaHE2oeVi4HikAB6eJuqnmtoZG4nBM/view?usp=sharing

    • This reply was modified 4 years, 2 months ago by vitoradler.
    Plugin Author Aurovrata Venet

    (@aurovrata)

    The others remains the same till the user correct the first tab and click on send again,

    let me check and get back to you…

    Is it possible to do something like this ↓

    unfortunately I do not have access, the link says I don’t have permission (you likely need to turn on ‘anyone with the link can see’ in the sharing option.

    Thread Starter vitoradler

    (@vitoradler)

    Just updated the permission, you might be able to see it now.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    Is it possible to do something like this ↓

    sure, that’s a good idea. I have now enabled the dots below each slide in c4.7.1. However, you will need to turn them on in your form’s HTML. Edit the form in the dashboard, locate your slider column section in the grid editor and switch to the HTML editor using the navigator shortcut.

    The editor will highlight the following HTML line,

    
<div class="columns full cf7sg-slider-section cf7sgfocus" data-next="" data-prev="" data-submit="Submit">

    and add the following attribute to the HTML data-dots="true",

    
<div class="columns full cf7sg-slider-section cf7sgfocus" data-next="" data-prev="" data-submit="Submit" data-dots="true">

    this will activate the dots.

    `

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘change the collapsed tab color when there’s an error inside’ is closed to new replies.

Tags