BUG: Validation error message not shown for dropdowns

  • Hi there,

    I think I found a bug in the way validation error messages are implemented for dropdowns.
    We have mandatory dropdown. When I do not select anything, the form rightfully refuses to submit, but the validation message below the dropdown remains hidden.
    https://www.violine.wien/probestunde/

    The gemerated code looks like this:

    <span class="wpcf7-form-control-wrap text-anruf">
    <div class="select_container">
        <select name="text-anruf" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required fill_inited wpcf7-not-valid" aria-required="true" aria-invalid="true" aria-describedby="wpcf7-f676-p73-o1-ve-text-anruf">
            <option value="">Wann kann ich dich zur Terminvereinbarung anrufen? *</option>
            <option value="Vormittags">Vormittags</option>
            <option value="Nachmittags">Nachmittags</option>
            <option value="Abends">Abends</option>
        </select>
    </div>
    <span class="wpcf7-not-valid-tip" aria-hidden="true">Dies ist ein Pflichtfeld./span>
</span>

    The wpcf7-is-not-valid class is set, but the CSS Rule to show .wpcf7-not-valid-tip does not work.
    The reason becomes clear when you look at other mandatory field types that are not properly filled. They look like this:

    <span class="wpcf7-form-control-wrap tel-phone">
    <input
        type="tel"
        name="tel-phone"
        value=""
        size="40"
        class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel wpcf7-not-valid"
        aria-required="true"
        aria-invalid="true"
        placeholder="Telefonnummer *"
        aria-describedby="wpcf7-f676-p73-o1-ve-tel-phone"
    />
    <span class="wpcf7-not-valid-tip" aria-hidden="true">Dies ist ein Pflichtfeld.</span>
</span>

    Here the <span class=”wpcf7-not-valid-tip” directly follows the input, which is required for the CSS rule to work.

    I cannot come up with a CSS rule that would work for the way the dropdown is implemented. I would need to write some Javascript code to work around it, but I think you should rather fix CF7 instead.

    Any existing workaround would be appreciated, though ??

    Thanks,

    Christian Toller
    tethis-it.at

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • I checked on one of my websites and this function is working fine… Are you sure you have configured the select correctly? For example, did you write “first_as_label” in the select parameters?

    Thread Starter chtoller

    (@chtoller)

    Hi Erik,

    the form looks as shown below. “first_as_label” is used. The field in question is [select* text-instrument …

    <div class="columns_wrap"><div class="column-1_2">[text* text-first-name placeholder "Vorname *"]</div><div class="column-1_2">
[text* text-last-name placeholder "Nachname *"]</div></div>
<div class="columns_wrap"><div class="column-1_2">[tel* tel-phone placeholder "Telefonnummer *"]</div><div class="column-1_2">
[email* email-email placeholder "E-Mail-Adresse *"]</div></div>
<div class="columns_wrap"><div class="column-1_2">[number number-age placeholder "Alter"]</div><div class="column-1_2">
[select menu-level first_as_label "Level" "Ich fange gerade an" "Ich bin schon fortgeschritten" "Ich bin Profi"]</div></div>
<div class="columns_wrap"><div class="column-1_1">[select menu-program first_as_label "Erfahrung am Instrument?" "0-3 Jahre" "4-6 Jahre" "mehr als 6 Jahre"]</div></div>
<div class="columns_wrap"><div class="column-1_1">[select* text-instrument first_as_label placeholder "Welcher Kurs interessiert dich? *" "Geige" "Klavier" "Elementares Musizieren" "Mentaltraining"]</div></div>
<div class="columns_wrap"><div class="column-1_1">[select* text-anruf first_as_label placeholder "Wann kann ich dich zur Terminvereinbarung anrufen? *" "Vormittags" "Nachmittags" "Abends"]</div></div>
<div class="columns_wrap"><div class="column-1_1">[textarea textarea-questions placeholder "Was ist dir wichtig? Welche Fragen hast du an mich?"]</div></div>
<div class="columns_wrap"><div class="column-1_1 center">Wir halten uns an den <a href="/datenschutz/" target="_blank">Datenschutz</a>.</div></div>
<div class="columns_wrap"><div class="column-1_1 center">[submit "Anmelden"]</div></div>

    And the form works just fine, but you can see e.g. in Chrome Inspector that the wpcf7-not-valid-tip still got the display: none style assigned.
    Other form field types have that overruled by the following CSS rule:

    .wpcf7-not-valid + span.wpcf7-not-valid-tip {
    display: block;
    margin-bottom: 1em;
    margin-top: -1em;
}

    But that rule doesn’t apply, if the span.wpcf7-not-valid-tip does not immediately follow the .wpcf7-not-valid

    If it works for you, would you mind sharing the code generated for your select field and the CSS rule that causes the tip to be shown?

    • This reply was modified 3 years, 11 months ago by chtoller.

    the css property “display: none” at _form.scss at line 257

    span.wpcf7-not-valid-tip {
	display: none;
}

    overrides the style.css correct one (display:block).

    why you need to hide the message if the validation error message wasn’t yet in the dom?

    • This reply was modified 3 years, 11 months ago by Erik.
    • This reply was modified 3 years, 11 months ago by Erik.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘BUG: Validation error message not shown for dropdowns’ is closed to new replies.