Как отобразить предупреждающее сообщение, если значение не заполнено в форме

Question

У меня есть форма (bootstrap) в скрипте, и она мне нужна, если пользователь не выбирает язык, а значение "" пусто для отображения сообщения с предупреждением и что ему нужно было выбрать язык, чтобы продолжить работу следующий шаг. (как вы можете видеть пустое значение в форме: значение "" представляет "Выбрать язык")

Я использую эту форму для инструмента виджетов Google для перевода, и когда посетитель ничего не нажимает и продолжает сохранение файл в базу данных, в базе данных я получаю значение: «Выберите язык», мне нужно, чтобы они выбирали один из языков из выпадающего меню.

Это код формы:

<div class="form-group">
  <label for="recipient-name" class="col-form-label">Language:</label>
  <input type="text" class="form-control langinput" id="country" value="" readonly>
  <select class="form-control langselect" aria-label="Language Translate Widget" id="country" style="display: none">
    <option value="">Select Language</option>
    <option value="English">English</option>
    <option value="Afrikaans">Afrikaans</option>
    <option value="Albanian">Albanian</option>
    <option value="Amharic">Amharic</option>
    <option value="Arabic">Arabic</option>

вот код кнопки для сохранения файлов в базе данных:

<button style="margin-top: -5%" background-color="#357ae8" type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap" onclick="lang1()">Save to Database</button>

lang1 Функция:

        var langPath = $("select.goog-te-combo option:selected").text();
        /*document.getElementById("country").options[document.getElementById("country").selectedIndex].text = langPath;
        document.getElementById("country").options[document.getElementById("country").selectedIndex].value = langPath;*/
        document.getElementById("country").value = langPath;
        //$(".langinput").value = langPath;
        //$('input[type="text"][class="langinput"]').prop("value", "langPath");
        //$('.langinput').text(langPath);
        $('.langinput').attr('value', langPath);
        //$(".langinput").display = "inline";

    }
    /*function stoppedTyping(){
        if($('#subtitle').val().length > 1 && $('#country').val().length >0 ) {
            document.getElementById('submit_button').disabled = false;
        } else {
            document.getElementById('submit_button').disabled = true;
        }
    }
    function stoppedSelect(){
        if($('#subtitle').val().length > 1 && $('#country').val().length >0 ) {
            document.getElementById('submit_button').disabled = false;
        } else {
            document.getElementById('submit_button').disabled = true;
        }
    }*/

Answer 1

С помощью bootstrap просто добавьте необходимые для выбора:

<select class="form-control langselect" aria-label="Language Translate Widget" id="country" style="display: none" required>
    <option value="">Select Language</option>
    <option value="English">English</option>
    <option value="Afrikaans">Afrikaans</option>
    <option value="Albanian">Albanian</option>
    <option value="Amharic">Amharic</option>
    <option value="Arabic">Arabic</option>
</select>

Редактировать

Измените кнопки при нажатии на onsubmit:

<button style="margin-top: -5%" background-color="#357ae8" type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap" onsubmit="lang1()">Save to Database</button>

Answer 2

Просто рекомендую переписать это: <option value="">Select Language</option> на это: <option selected disabled>Select Language</option>

Когда пользователь нажимает на следующую кнопку, проверьте, равна ли длина значения выбора 0, и верните ее.