Form Select Required and Placeholder

Question

So heres my code at this moment in time (Note - this code is inside of a PHP for loop being echo'd out, so when you see the $i variable just assume its a number that's incrementing every pass):

<select name='field{$i}type' class='form-control' required>
    <option disabled selected hidden>Type of Field</option>
    <option value='text'>Text</option>
</select>

When this select is created dynamically with my php, I want to have a "placeholder" for the select. I've found answers on how to make the placeholder (Bootstrap select dropdown list placeholder), which is now there and working. However, i need this select to be required. I need to force the user to select the text option before form submission. Any way to do this in pure HTML? the required option is getting confused i believe because i've put in the "selected" parameter. Is that the case? How can I fix this.

score 25 · Accepted Answer · edited Jun 20 '20 at 09:12

25

If the value is null like value="" and it is required, then you need a value to submit (HTML validation.)

The required attribute

The simplest HTML5 validation feature to use is the required attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

REF: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

<form>
  <select name='field{$i}type' class='form-control' required>
    <option disabled value="" selected hidden>Type of Field</option>
    <option value='text'>Text</option>
</select>

  <button type="submit">SUBMIT</button>
</form>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 19 '17 at 19:49

Dalin Huang

11,212
5
32
49

2

So its just a simple matter of adding `value=""` to the "placeholder" option? – J. Robinson Jun 19 '17 at 19:53
@J.Robinson yes – Dalin Huang Jun 19 '17 at 19:54
@J.Robinson a example here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required – Dalin Huang Jun 19 '17 at 19:57
@J.Robinson you need to pass a value (event it is empty string) so the input can be validated. – Dalin Huang Jun 19 '17 at 19:58
@J.Robinson Cool =D – Dalin Huang Jun 19 '17 at 20:02

Form Select Required and Placeholder

1 Answers1

The required attribute