Form Validation on Select Element

I have just come across this behaviour, I have an insert to database style form, in this form I have set many fields to required="" and if I submit the form without inputting anything all the required fields highlight red as expected except for the select element.

The only strange thing about how I made my select element was that I wanted the first selected option to be Please Select, with no value at all. Here is how it looks in code when the validation is not working correctly.

<div class="form-group row">
    <label for="g_title" class="col-sm-2 col-form-label">Title *</label>
    <div class="col-sm-10">
        <select id="g_title" class="form-control" name="g_title" required="" dmx-class:is-valid=“state.executing”>
            <option selected="">Please Select</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
            <option value="Mrs">Mrs</option>
        </select>
    </div>
</div>

Here is how it looks in code when it is working correctly

<div class="form-group row">
    <label for="g_title" class="col-sm-2 col-form-label">Title *</label>
    <div class="col-sm-10">
        <select id="g_title" class="form-control" name="g_title" required="" dmx-class:is-valid=“state.executing”>
            <option selected="" value="">Please Select</option>
            <option value="Mr">Mr</option>
            <option value="Miss">Miss</option>
            <option value="Mrs">Mrs</option>
        </select>
    </div>
</div>

Look at the first option of Please Select, I added value="" to it and this forces to validation to correctly identify that this is not a valid value for a required="" select option. The problem here is that there is no other way i can find to make this value="" within the GUI, I had to use code to make this alteration.