Client side validation for select input

I’m not sure the best way to validate a select input where the first option is used as a label similar to example below. And then validate it so it will not except a ‘Blank value’ thus not excepting ‘Select County’ as the selected option.

    <select id="county1" class="form-control" required="" data-msg-required="Please select your county.">
    <option value="">Select County</option>
    <option value="Bedfordshire">Bedfordshire</option>
    <option value="Berkshire">Berkshire</option>
    <option value="Berkshire">Blaenau Gwent</option>
    <option value="Bridgend">Bridgend</option>
    <option value="Bristol">Bristol</option>
    ....
    </select>

How can I achieve this?

Thanks in advance!

Well, when the first item value is empty value="" and you apply the required validation, then it won’t allow submitting the form if the selected option is the first one, you will see the validation/required message.

But how can I get this to work in a multi-step form. I have normal text fields with click and focus dynamic events to show the validation states. But this doesn’t work with Select inputs. I am having a similar issue with a radio group which I posted about on another message feed.

I believe i already answered this question in a similar topic you posted. Run the dynamic events > click > input_name > validate on clicking the next button…

How can I validate on clicking the Next button. It already uses a click event for the steps variable. If you mean using a click event on the select input field… How do I use the next button as the trigger. Sorry If i’m being dumb here.

Ok so i’ve applied click and focus events both validate actions which works. My problem still lies with the fact that the user can still move to the next step if by clicking the next button is the first action performed. is there a way I can use the 'Disabled dynamic attribute as well and bind invalid for each of the required fields?

Yes that’s a bit more complex when also using validation.
A solution here can be the inline flows for your next buttons.
Run validate for your input(s), then add a 100ms wait, then add a condition where you check if input1 is invalid OR input2 is invalid, leave then step empty. Else - set the page var value + 1.

2 Likes

This works great… Thanks @Teodor… probably wont be the last you’ve heard of me today though!! :stuck_out_tongue_winking_eye: