Возвращает false, если в поле выбора Не выбрано значение (кроме заголовка).

У меня есть HTML-форма с полем выбора. При выборе первого выпадающего списка, следующий должен быть автоматически заполнен с помощью AJAX.

Введите описание изображения здесь

При нажатии кнопки Download Records (id="getCsv") генерируется CSV-файл. Проблема в том, что я хочу сделать все поля обязательными. Вот код jquery 

var teacher_name = $("#sel_teacher option:selected").text();
var unittest_name = $("#sel_test1 option:selected").text();

var class_name = $("#sel_class1 option:selected").text();
var class_id = $('#sel_class1').val();

var division_name = $("#sel_div1 option:selected").text();
var division_id = $('#sel_div1').val();

var subject_name = $("#sel_sub1 option:selected").text();

if (teacher_name == "") {
    alert('Please Select Teacher Name.');
    return false;
} else if(class_name == "") {
    alert('Please Select Class Name.');
    return false;
} else if(division_name == "") {
    alert('Please Select Division Name.');
    return false;
} else if(subject_name == "") {
    alert('Please Select Subject Name.');
    return false;
} else if(unittest_name == "") {
    alert('Please Select Unit Test Name.');
    return false;
} else {
    var myObject = new Object();
    myObject.class_name = class_name;
    myObject.class_id = class_id;
    myObject.division_name = division_name;
    myObject.division_id = division_id;
    myObject.subject_name = subject_name;
    myObject.test_name = unittest_name;

    var formData = JSON.stringify(myObject);
    $('#getCsv').attr('href','csv_generator.php?data=' + formData);
}

Проблема в том, что когда я нажимаю Download Records, даже если первое поле выбора пустое, сразу появляется окно предупреждения для второго поля выбора. Я попытался решить эту проблему, используя ниже, но не повезло.

if ($("#sel_teacher").attr("selectedIndex") == 0) {
   alert("You haven't selected anything!");
   return false;
}

Кто-нибудь может пожалуйста помочь мне с этим? Любая помощь ценится.

3 5
javascript html jquery validation

3 ответа:

selectedIndex является свойством, использующим prop: 

$("#sel_teacher").prop("selectedIndex")

Кроме того, вы можете упростить свой код, извлекая выбранное значение с помощью только $("#sel_teacher").val() и сравнивая с пустой строкой (предполагая, что value этой опции пусто).

var teacher_name = $("#sel_teacher").val();
// get other <select /> values here...

if (teacher_name == '') {
   alert("You haven't selected anything!");
   return false;
}

// test other values here...
3

Это может быть из-за значения по умолчанию, которое вы задали для первого текстового поля.Просто измените значение на "" onclick или on blur на этом текстовом поле.

1

Или вы можете просто решить этот вопрос с помощью атрибута HTML5 required и добавления прослушивателя событий onchange().

<select name="sel_teacher" onchange="get_value();" id="sel_teacher" required>
 <option>--Select Teacher Name--</option> 

</select>

<script>
 function get_value() {
   var teacher_name = $("#sel_teacher").val();
  // get other <select /> values here...

   if (teacher_name == '') {
     alert("You haven't selected anything!");
     return false;
   } else {

     // write code when teacher_name is selected

   }
 }
</script>
1