[SalesForce] required =true attribute is not rendered in the underlying HTML

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.

Best Answer

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:

Related Solutions

[SalesForce] apex:pageMessages includes the entire component tree path for a apex:inputText with required=”true”

Try adding a label attribute to the inputText field - if there is no label, the error will display the whole tree, but with a label, it should just display the label + error message

[SalesForce] Apex:selectList value not getting set in controller

I have had the same problem. The solution was to use tha native html select list and an visualforce hidden field. After each change on the selectlist the currently selected value is saved to the hidden field:

<!-- Here is the native select list. 
     It is empty, we fill it later with own options.
     Notice, that by onchange the selected value will be send to the hidden field. -->
<select id="someList" onchange="jQuery('[id$=selectedItemHidden]').val(jQuery(this).val());">
</select>

<!-- Hidden field with a reference to the apex variable -->
<apex:inputHidden value="{!selectedAccount}" id="selectedItemHidden"/>

<!-- Here we fill the select list with some options -->
<script>
for(var i = 0; i < optionsArray.length; i++)
{
    var opt = new Option(optionsArray[i],optionsArray[i]);
    jQuery("select#someList").append(opt);
}
<script>

You can pre fill the html select list with options from the database:

Controller:

public class MyClass{
    // Here we define the list with accounts
    public List<Account> accounts { get; set; }

    // In constructor we will read the accounts
    public MyClass(){
        accounts = [ Select Id, Name From Account Limit 10 ];
    }
}

Page:

<!-- Here we just use repeat function to iterate the list -->
<select id="someList">
    <apex:repeat value="{!accounts}" var="a">
        <option value="{!a.id}">{!a.name}</option>
    </apex:repeat>
</select>

Best Answer

Related Solutions

[SalesForce] apex:pageMessages includes the entire component tree path for a apex:inputText with required=”true”

[SalesForce] Apex:selectList value not getting set in controller

Related Topic