HTML — JavaScript проверяет, выбран ли параметр «Выбрать»

Проверьте JavaScript, что опция выбора была выбрана

У меня есть элемент select на странице формы, и я хотел бы, чтобы внутренний html-ярлык был изменен, если пользователь пытается отправить без выбора. Вот HTML.

  {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="FamilySize" name = "FamSizeLable"{amp}gt;How Many in Your Household{amp}lt;/label{amp}gt; {amp}lt;select class="form-control" name = "FamilySize" id="FamilySize"{amp}gt; {amp}lt;option disabled selected value=""{amp}gt;Size{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;1{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;2{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;3{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;4{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;5{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Good god ya'll{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; 

Я пытался получить значение несколькими разными способами.

  else if(!document.getElementById("FamilySize").value){ document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***"; document.getElementById("FamSizeLabel").style.color = "red"; return false; } 

а также

  else if(!document.querySelector('[id = "FamilySize"]').value){ document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***"; document.getElementById("FamSizeLabel").style.color = "red"; return false; } 

а также

  else if(document.querySelector('[id = "FamilySize"]').value==null){ document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***"; document.getElementById("FamSizeLabel").style.color = "red"; return false; } 

а также

  else if(document.querySelector('[id = "FamilySize"]').value==""){ document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***"; document.getElementById("FamSizeLabel").style.color = "red"; return false; } 

Я также попытался использовать console.log в представлении разработчика, чтобы увидеть, что мне не хватает. Тем не менее, я довольно новичок в JavaScript и не могу его закрепить. Форма все еще отправляется, когда FamilySize не выбран. Я могу поймать эту сторону сервера, но я пытаюсь улучшить JavaScript, поэтому хочу это понять / понять.

Изменить (полный код страницы ниже):

 {% extends "layout.html" %} {% block main %} {amp}lt;!--form action tells this form what route to post the data to. DOH! --{amp}gt; {amp}lt;form action="/form" method="post"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;!--for="FormControlInput1"This was in the EmailLablel label not sure what it does--{amp}gt; {amp}lt;label id = "EmailLabel" {amp}gt;Email address{amp}lt;/label{amp}gt; {amp}lt;input type="email" class="form-control" name = "Email" autocomplete = "off" autofocus id="FormControlInput1" placeholder="name@example.com"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label id = "Fname" {amp}gt;First Name{amp}lt;/label{amp}gt; {amp}lt;input type="text" class="form-control" name = "Fname" autocomplete = "off" id="FnameFormControlInput" placeholder="John"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label id = "Lname" {amp}gt;Last Name{amp}lt;/label{amp}gt; {amp}lt;input type="text" class="form-control" name ="Lname" autocomplete = "off" id="LnameFormControlInput" placeholder="Doe"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="FamilySize" name = "FamSizeLable"{amp}gt;How Many in Your Household{amp}lt;/label{amp}gt; {amp}lt;select class="form-control" name = "FamilySize" id="FamilySize"{amp}gt; {amp}lt;option disabled selected value=""{amp}gt;Size{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;1{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;2{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;3{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;4{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;5{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Good god ya'll{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="AgeGroup"{amp}gt;Select Age Group{amp}lt;/label{amp}gt; {amp}lt;select multiple class="form-control" name = "AgeGroup" id="AgeGroup"{amp}gt; {amp}lt;option{amp}gt;0-15{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;16-24{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;25-36{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;37-45{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;45-Dead{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="Comments"{amp}gt;Comments{amp}lt;/label{amp}gt; {amp}lt;textarea class="form-control" name = "Comments" id="Comments" rows="3"{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-check"{amp}gt; {amp}lt;input type="checkbox" class="form-check-input" id="exampleCheck1"{amp}gt; {amp}lt;label class="form-check-label" for="exampleCheck1"{amp}gt;Check me out{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button class="btn btn-primary" type="submit"{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;script{amp}gt; document.querySelector('form').onsubmit=function(){ if(!document.querySelector('[type = "email"]').value){ document.getElementById("EmailLabel").innerHTML = "***You Must Provide an Email address***"; document.getElementById("EmailLabel").style.color = "red"; return false; } else if(!document.querySelector('[id = "FnameFormControlInput"]').value){ document.getElementById("Fname").innerHTML = "***You Must Provide a First Name***"; document.getElementById("Fname").style.color = "red"; return false; } else if(!document.querySelector('[id = "LnameFormControlInput"]').value){ document.getElementById("Lname").innerHTML = "***You Must Provide a Last Name***"; document.getElementById("Lname").style.color = "red"; return false; } // //Here we have to use label for family size because there is no text on the control itself else if(!document.getElementById("FamilySize").value){ document.getElementByName("FamSizeLabel").innerHTML = "***You Must Select a Family Size***"; document.getElementById("FamSizeLabel").style.color = "red"; console.log(document.querySelector('[id = "FamilySize"]').value); return false; } else if(!document.querySelector('[id = "AgeGroup"]').value){ document.getElementById("AgeGroup").innerHTML = "***You Select Your Age Group***"; document.getElementById("AgeGroup").style.color = "red"; return false; } alert(document.querySelector('[id = "FamilySize"]').value); return true; }; {amp}lt;/script{amp}gt; {% endblock %} 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector