Required Select with first_as_label will not validate
-
If I try to use a select box and make it required and also use the first_as_label option the field will not validate as being empty if the first option is selected. It appears as if the code may be checking for an empty option text as opposed to an empty value. This makes it basically impossible (without hard-coding it and using JS trickery) to have a label in my select box. If I actually set the first option to blank, the required validation works perfectly.
This is my form shortcode from the CF7 edit screen. Obviously the real one would have all 50 states. This example is shortened for readability.
[select* contact-state id:contact-state class:styled-select first_as_label "State" "Alabama" "Alaska" "Arizona" "Arkansas"]
This is what the HTML output of that looks like.
<span class="wpcf7-form-control-wrap contact-state"><select name="contact-state" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required styled-select" id="contact-state" aria-required="true" aria-invalid="false"><option>State</option><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option></select></span>
I’m wondering if this is why the first_as_label option is only mentioned on the CF7 website, and is not an actual option to select when creating the form in WP.
- The topic ‘Required Select with first_as_label will not validate’ is closed to new replies.