it-swarm.com.ru

Подтвердить выбор

Я использую плагин jQuery Проверка для проверки формы. У меня есть список выбора, похожий на этот:

<select id="select">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

Теперь я хочу убедиться, что пользователь выбирает что-либо, кроме «Выберите опцию» (которая по умолчанию). Так что он не будет проверяться, если вы выберете первый вариант. Как это может быть сделано?

51
ponjoh

Просто добавьте класс необходимого для выбора

<select id="select" class="required">
71
redsquare

Для начала вы можете «отключить» эту опцию от случайного выбора пользователями:

<option value="" disabled="disabled">Choose an option</option>

Затем, внутри вашего события JavaScript (неважно, jQuery или JavaScript), чтобы ваша форма проверила, установлено ли оно, выполните:

select = document.getElementById('select'); // or in jQuery use: select = this;
if (select.value) {
  // value is set to a valid option, so submit form
  return true;
}
return false;

Или что-то в этом роде.

19
Jeremy Visser

Я не знаю, каким был плагин, когда был задан вопрос (2009), но сегодня я столкнулся с той же проблемой и решил ее следующим образом:

  1. Дайте вашему тегу выбора атрибут имени. Например, в этом случае

    <select name="myselect"> 

  2. Вместо того, чтобы работать с атрибутом value = "default" в опции тега, отключите опцию по умолчанию, как предложено Джереми Виссером, или установите значение = ""

    <option disabled="disabled">Choose...</option> 

    или же

    <option value="">Choose...</option> 

  3. Установите правило проверки плагина

    $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

    или же

    <select name="myselect" class="required">

Obs: решение redsquare работает, только если у вас есть только один выбор в вашей форме. Если вы хотите, чтобы его решение работало более чем с одним выбором, добавьте атрибут name к вашему выбору.

Надеюсь, поможет! :)

4
Pedro Paulo Mendes Pereira
<select id='bookcategory' class="form-control" required="">
                    <option value="" disabled="disabled">Category</option>
                    <option value="1">LITERATURE & FICTION</option>
                    <option value="2">NON FICTION</option>
                    <option value="3">ACADEMIC</option>
            <option value="4">CHILDREN & TEENS</option>

                </select>

Проверка формы HTML может быть выполнена браузером автоматически Попробуйте приведенный выше код:
Все остальное будет сделано автоматически, не нужно создавать какие-либо js-функции, только этот выпадающий список и кнопка отправки.

2
Gurmeet Singh

вы хотите убедиться, что пользователь выбирает что-либо, кроме «Выберите опцию» (которая по умолчанию). Так что он не будет проверяться, если вы выберете первый вариант. Как это может быть сделано?

Вы можете сделать это, просто добавив атрибут required = "required" в теге select. Вы можете увидеть это в коде ниже

<select id="select" required="required">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

У меня это отлично работало в chorme, firefox и Internet Explorer. Спасибо 

0
Varun Vardhan
if (select == "") {
    alert("Please select a selection");
    return false;

Это должно работать для вас. Это только для меня.

0
M. Ray

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

<script language='JavaScript' type='text/javascript'>
    function validateThisFrom(thisForm) {
        if (thisForm.FIELDNAME.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME.focus();
            return false;
        }
        if (thisForm.FIELDNAME2.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME2.focus();
            return false;
        }
    }
</script>
<form onSubmit="return validateThisFrom (this);">
    <select name="FIELDNAME" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
    <select name="FIELDNAME2" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
</form>
0
Marina