3

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.

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:

enter image description here

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.