Member 13233111 Ответов: 2

Как мне поставить валидацию на selectbox?

Это мой список стран и языков

<select id="DropDownSeverity" class="dropbtn"> <!-- severity and urgency hard coded for now -->
                		<option disabled="disabled" selected="selected">Severity ▼</option>
                    	<option value="Extreme">Extreme</option>
                		<option value="Minor">Minor</option>
                		<option value="Moderate">Moderate</option>
                		<option value="Severe">Severe</option>
                    	<option value="Unknown">Unknown</option>
                	</select>


Это моя кнопка или кнопка отправки

<td style="align:centre;height:30px; width:100px; background-color:  #148f77;"><input type="button" onclick="CreateAlert();" value="Create" id="CreatUpdateAlertButton"/></td>


Что я уже пробовал:

<select required id="DropDownSeverity" class="dropbtn"> <!-- severity and urgency hard coded for now -->
                		<option disabled="disabled" selected="selected">Severity ▼</option>
                    	<option value="Extreme">Extreme</option>
                		<option value="Minor">Minor</option>
                		<option value="Moderate">Moderate</option>
                		<option value="Severe">Severe</option>
                    	<option value="Unknown">Unknown</option>
                	</select>


пробовал required и js тоже показывать предупреждение, если значение равно null, но у меня это не сработало. пожалуйста помочь

Thomas Daniels

Что вы хотите проверить?

Member 13233111

если значение Не выбрано. При нажатии кнопки пользователь должен получить предупреждение. Было бы лучше, если бы вы предложили мне решение без js

Richard Deeming

То required атрибут отлично работает для меня: демонстрация[^]

Если вы не выберете опцию, а затем попытаетесь отправить форму, вы не сможете ее отправить, и браузер отобразит всплывающее окно с ошибкой.

2 Ответов

Рейтинг:
15

Thomas Daniels

В своем комментарии вы просите найти решение без JavaScript, но это невозможно. Итак, вот решение, которое действительно использует JavaScript.


  1. Установить атрибут "значение" на первый "вариант" к "none":
    <option disabled="disabled" selected="selected" value="none">Severity ▼</option>
  2. В коде проверки убедитесь, что выбранное значение не равно "none":
    if (document.getElementById("DropDownSeverity").value === "none") {
    alert("Please select a severity.");
    return; // 'exit' the running function; remove this line if you don't want that
}



Обратите внимание, что люди могут использовать инструменты разработчика Вашего браузера, чтобы изменить значение элемента на что-то другое, чтобы обойти проверку. Если вы отправляете это значение на сервер, обязательно проверьте его и на стороне сервера. Если ваше приложение является чисто клиентским, не нужно беспокоиться об этом.

Member 13233111

Спасибо за предложение, брат... но я хочу применить это на кнопке.

Member 13233111

в соответствии с вашим предложением по мере загрузки страницы отображается предупреждение. Вот почему на кнопку нажмите.

Thomas Daniels

Я сказал: "в вашем проверочном коде ...". вы должны поместить мой кусок кода внутрь функции вашего нажатия кнопки.

Member 13233111

Большое тебе спасибо, брат... Это сработало идеально

Member 13233111

У меня есть три Selectbox с одним и тем же вызовом функции... Как объединить все три?

Thomas Daniels

Просто сделайте то же самое для всех полей выбора: установите атрибут "value" для значения по умолчанию и используйте блок "if", которым я поделился, но измените аргумент getElementById для каждого отдельного поля выбора.

Member 13233111

Я так и сделал, но он показывает мне только 1-ю степень серьезности см. Решение 2

Thomas Daniels

Ну, это потому, что оператор' return ' выходит из функции, если раскрывающийся список серьезности не имеет значения. Второе предупреждение появится, если "серьезность" действительно имеет значение.

Member 13233111

Еще раз спасибо, брат... ты самый лучший!!!

Рейтинг:
1

Zahid Mughal

с помощью Jquery:

function CreateAlert(){
   if($("#DropDownSeverity option:selected").value()==null){
      //alert your message here
   }
}

Member 13233111

У меня есть три поля выбора, как вы можете видеть в решении 2, что я пробовал