2

I'm trying to implement a form with a required drop-down list on a VF page, as described in this example.

If you click on the link above and run the sample, it works fine but when I try to implement it on a VF page it does not.

In my code below I have two fields of type text and select, the validation runs on the text field if it remains blank but not on the select (if the value is set to the default None).

Please advise.

<apex:page>
   <body>
      <form action="/action_page.php">
         <input type="text" required="true" autofocus="true"></input>
         <select required="true">
            <option value="">None</option>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
         </select>
         <input type="submit"/>
      </form>
   </body>
</apex:page>
Improve this question
2
  • Judging by the URL (tryhtml5_select_required) this may be an HTML 5 feature, have you tried setting the doctype for the VF page using <apex:page docType="html-5.0" />?
    – Matt Lacey ♦
    Mar 28, 2019 at 23:52
  • Yes I have, same results.
    – Json
    Mar 31, 2019 at 19:48

2 Answers 2

Reset to default
4
+50

I had the same issue and I've got this working now:

Instead of:

<option value="">None</option>

Use the following:

<option label="Please Select" value=""></option>

I hope this helps, thanks.

Improve this answer
0
0

It's quite weird, but Salesforce doesn't support required attribute in select. Here's what it has in console when <option value="">None</option> is provided:

enter image description here

And if you try to debug the value passed, when None option is selected by putting an alert, like so:

<input type="submit" onclick="alert(document.getElementById('selectOption').value);"/>

here's what the alert message says:

enter image description here

What's interesting is that the value and label are considered the same when no value is specified and this behavior is different for different browsers.

The workaround suggested by Vasile actually works as label and value are specified clearly and separately. You can choose to have label of your choice too:

<option label="None" value=""></option>

But unfortunately, there's no better way to handle the html requiredness without implementing and and they have their limitations too.

Improve this answer

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.