Атрибут required тега <select> — обов'язкове поле

HTML

<p id="text"></p>

  <form>
   <select name="type" size="4" required>
    <option value = "Програміст">Програміст</option>
    <option value = "Системний аміністратор">Системний аміністратор</option>
    <option value = "Маркетолог">Маркетолог</option>
    <option value = "Дизайнер">Дизайнер </option>
   </select>

  <input type="button" value="Обрати" onClick="dataSelect(this.form)">
</form>

CSS

div{
  padding:10px;
  float:left;
}

select:focus{
  border: 2px solid #ff0000;  
}

JS

text.innerHTML = "Вибрана професія: ";

function dataSelect(f) {
  n = f.type.selectedIndex;
  text.innerHTML = "Вибрана професія: " + f.type.options[n].value;
}
//# sourceURL=pen.js

HTML

<form>
    <div class="field">
        <label for="a">Місто — перший пункт БЕЗ value</label>
        <select id="a" required>
            <option>Оберіть місто</option>
            <option>Київ</option>
            <option>Львів</option>
        </select>
        <p class="verdict"></p>
        <p class="why">У полі вже лежить рядок «Оберіть місто» — він цілком
            непорожній, тому перевірка не спрацює ніколи.</p>
    </div>

    <div class="field">
        <label for="b">Місто — перший пункт з value=""</label>
        <select id="b" required>
            <option value="">Оберіть місто</option>
            <option value="kyiv">Київ</option>
            <option value="lviv">Львів</option>
        </select>
        <p class="verdict"></p>
        <p class="why">Поле порожнє, доки не оберуть місто. Оберіть — і напис
            із рамкою зміняться просто на очах.</p>
    </div>
</form>

CSS

.field {
    margin-bottom: 18px;
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

select {
    padding: 6px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

select:invalid {
    border-color: #d64545;
    background: #fff4f4;
}

select:valid {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

.verdict {
    margin: 6px 0 0;
    font-weight: 600;
}

select:valid ~ .verdict::before {
    content: "стан поля: заповнено — форму буде надіслано";
    color: #3a9a4f;
}

select:invalid ~ .verdict::before {
    content: "стан поля: порожньо — форму не буде надіслано";
    color: #d64545;
}

.why {
    margin: 4px 0 0;
    max-width: 420px;
    color: #5a6472;
    font-size: .9em;
}