<apex:SelectList > required =true attribute is not rendered in the underlying HTML

Question

I have a <apex:selectList> (multiselect) tag and I have set required attribute to true.

I then set docType="html-5.0"at page level so that I can take advantage of html5 validations. Unfortunately form submits with no validation on that field.

I want HTML5 validation to work here.

HTML :

<select id="j_id0:theForm:j_id29:j_id34:BroadbandUsageSL" name="j_id0:theForm:j_id29:j_id34:idVal" multiple="multiple" size="6">    
    <option value="Browsing and email">Browsing and email</option>
    <option value="Facebook and social media">Facebook and social media</option>
    <option value="Online Gaming">Online Gaming</option>
    <option value="Streaming TV and Video">Streaming TV and Video</option>
    <option value="Study">Study</option>
    <option value="Work">Work</option>
</select>

The commandbutton errors out with validation error. HTML5 seems to be bypassing validation.

Let me know if I am missing anything.

Answer 1

If you look at your compiled HTML, you'll see that attribute required is not presented. But documents clearly tells us that apex:selectlist should support it.

For some reason Sasesforce doesn't do this, let's do it ourself within javascript:

<apex:page standardcontroller="Contact" extensions="sampleCon2" docType="html-5.0">
    <script type="text/javascript">
        window.onload = function(){
            var elems = document.querySelectorAll('[id$="setRequired"]');
            for (var i = 0; i < elems.length; i++){
                elems[i].required = true;
            }
    }
    </script>
    <apex:form >
        <apex:pageMessages />
        <apex:PageBlock>        
            <apex:selectList required="true" value="{!countries}" multiselect="false" id="setRequired">
                <apex:selectOptions value="{!items}"/>
            </apex:selectList>
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!goback}" value="Back" immediate="true"/>
            </apex:pageBlockButtons>
        </apex:PageBlock>
    </apex:form>
</apex:page>

During loading page event - Javascript will parse all elements where id ends with setRequired and set required parameter.

Result:

Answer 2

Because you're applying this to a multi-select picklist, I don't think you can do this using html5 validation. Instead, you'll need to use something that contains code similar to what's in the jQuery Validation Plugin which can handle multi-select coded situations which, as I recall, requires that you set how many selections among the options are required.