Подтвердить выбор выпадающего списка с помощью javascript

Question

У меня возникли проблемы с проверкой моего раскрывающегося списка с помощью javascript. Я хочу отобразить сообщение об ошибке под полем внутри тегов span, если пользователь не выбрал никаких параметров. Я проверил почти все учебники, но не повезло.

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

<form name="subform" id="subform" action="submit.php" onsubmit="return checkForBlank()" method="POST" enctype="multipart/form-data"> 

    <div class="md-form"> 
     <input type="text" id="subcim" name="subcim" class="form-control"><span class="error_form" id="subcim_error_message"></span> 
     <label for="subcim" class="">Title</label><br> 
    </div> 

<div class="md-form"> 
    <select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span> 
     <option value="0" selected>Please select an option</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
    </select> 
    <label id="subcat_info">Category</label><br> 
    </div> 

<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button> 
</form> 

и вот код Javascript (первый, если оператор проверяет поле ввода в форме:

function checkForBlank() { 
if(document.getElementById("subcim").value == "") { 
    document.getElementById("subcim_error_message").textContent="You must add a title!"; 
    return false; 
} else if(document.getElementById("subcim").value.length < 5 || document.getElementById("subcim").value.length > 80) { 
    document.getElementById("subcim_error_message").textContent="The title must be between 5 and 80 characters!"; 
    return false; 
} 

var result = document.getElementById('subcat').value; 
if (result === "0") { 
    document.getElementById("subcat_error_message").textContent="You must select an option!"; 
    return false; 
} 
} 

Я использую

onsubmit="return checkForBlank()" 

внутри тега формы.

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

Любая помощь приветствуется

Answer 1

function Validate() { 
     var subcat= document.getElementById("subcat"); 
     if (subcat.value == "") { 
      //If the "Please Select" option is selected display error. 
      alert("Please select an option!"); 
      return false; 
     } 
     return true; 
    } 


    onsubmit ="return Validate()" 

Answer 2

function Validate() { 
     var subcat= document.getElementById("subcat"); 
     if (subcat.value == "0") { 
      //If the "Please Select" option is selected display error. 
      alert("Please select an option!"); 
      return false; 
     } 
     return true; 
    } 


    onsubmit ="return Validate();" 

Answer 3

Изменение Syntex из

<div class="md-form"> 
    <select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span> 
     <option value="0" selected>Please select an option</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
    </select> 
    <label id="subcat_info">Category</label><br> 
</div> 

Для Синтекс ниже

<div class="md-form"> 
    <select class="mdb-select" id="subcat" name="subcat"> 
     <option value="0" selected>Please select an option</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
    </select> 
    <span class="error_form" id="subcat_error_message"></span> 
    <label id="subcat_info">Category</label><br> 
</div> 

Единственная ошибка, которую вы делаете это положить ваш диапазон ошибок в выбранном теге lf, который не является предопределенным форматом HTML для метки select. Как вы можете видеть, после того, как вы поместили свой тег span в свой тег select, каждая вещь будет работать так, как вы хотите.

Answer 4

Html

<div class="md-form"> 
     <select class="mdb-select" id="subcat" name="subcat"> 
      <option value="0" selected>Please select an option</option> 
      <option value="option1">Option 1</option> 
      <option value="option2">Option 2</option> 
     </select> 
<span class="error_form" id="subcat_error_message"></span> 
     <label id="subcat_info">Category</label><br> 
     </div> 

JavaScript

function Validate() { 
        var subcat= document.getElementById("subcat"); 
        if (subcat.value == "0") { 
         //If the "Please Select" option is selected display error. 
        document.getElementById("subcat_error_message").innerHTML="Error Message";  
    //OR 
       document.getElementById("subcat_error_message").textContent="Error Message"; 
     return false; 
        } 
        return true; 
       } 

       onsubmit ="return Validate();"