Home  >  Forum  >  JavaScript
Post New Query

validate select is not working


joined on
November 20,2015
Asked on November 20,2015
validate select is not working, I tried to get from ID to implement the same effect described in the below script. pls help.

 function validateSelect(language){ 
   if(document.getElementById('language').value > 0){
    document.getElementById('language').style.borderColor ='#80c75a';
document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}
joined on
October 10,2013
Replied on November 20,2015

At first look, what I am getting wrong is that, language is a variable, you should use it as

document.getElementById(language).value

without single quote.

joined on
November 20,2015
Replied on November 20,2015

@Mohit, Still not working
joined on
November 20,2015
Replied on November 21,2015

This is my Html code.

<div class="field_wrap"><select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
  <option value="0" disabled selected>Prefered Language</option>
  <option value="1">English</option>
  <option value="2">Hindi</option>
  <option value="3">Tamil</option>
  <option value="4">Malayalam</option>
</select></div>


And I changed mt Validation with below script, still having issues; if the value 0 it shows green color, I want it to be red.

function validateSelect(language){ 
   var myValue = document.getElementById('language').value;
   if(myValue.length > 0){
    document.getElementById('language').style.borderColor ='#80c75a';
    document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}

joined on
October 10,2013
Replied on November 21,2015

Change myValue.length to myValue and then working.

<html>
<body>
<head>
<script>
function validateSelect(language){ 
   var myValue = document.getElementById('language').value;
   if(myValue > 0){
    document.getElementById('language').style.borderColor ='#80c75a';
    document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}
</script>
</head>

<div class="field_wrap"><select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
  <option value="0" selected>Prefered Language</option>
  <option value="1">English</option>
  <option value="2">Hindi</option>
  <option value="3">Tamil</option>
  <option value="4">Malayalam</option>
</select></div>

</body>
</html>






joined on
November 20,2015
Replied on November 25,2015

@Mohit, Now I added another selection box for Time below this language selectionbox, how can I add script to it.

<div class="field_wrap"><select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
  <option value="0" disabled selected>Prefered Language</option>
  <option value="1">English</option>
  <option value="2">Hindi</option>
  <option value="3">Tamil</option>
  <option value="4">Malayalam</option>
</select></div>
<div class="field_wrap"><select name="time" id="time" onblur="validateSelect(time)" class="select_promo">
  <option value="0" disabled selected>Time to Contact</option>
  <option value="1">8 - 10 AM</option>
  <option value="2">10 - 12 AM</option>
  <option value="3">12 - 2 PM</option>
  <option value="4">2 - 5 PM</option>
  <option value="5">5 - 8 PM</option>
</select></div>


I used the same selection script for Language, can I use the script for the time selector?

function validateSelect(language){ 
   var myValue = document.getElementById('language').value;
   if(myValue > 0){
    document.getElementById('language').style.borderColor ='#80c75a';
    document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}
joined on
October 10,2013
Replied on November 25,2015

Do some changes in your code and it will work. Find the changes in bold.

<html>
<body>
<head>
<script>
function validateSelect(item){ 
   var myValue = document.getElementById(item).value;
   if(myValue > 0){
    document.getElementById(item).style.borderColor ='#80c75a';
    document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById(item).style.borderColor ='#e35152';
    return false;
  }
}
</script>
</head>


<div class="field_wrap"><select name="language" id="language" onblur="validateSelect('language')" class="select_promo">
  <option value="0" disabled selected>Prefered Language</option>
  <option value="1">English</option>
  <option value="2">Hindi</option>
  <option value="3">Tamil</option>
  <option value="4">Malayalam</option>
</select></div>
<br/><br/><br/>
<div class="field_wrap"><select name="time" id="time" onblur="validateSelect('time')" class="select_promo">
  <option value="0" disabled selected>Time to Contact</option>
  <option value="1">8 - 10 AM</option>
  <option value="2">10 - 12 AM</option>
  <option value="3">12 - 2 PM</option>
  <option value="4">2 - 5 PM</option>
  <option value="5">5 - 8 PM</option>
</select></div>

</body>
</html>
joined on
November 20,2015
Replied on November 26,2015

@Mohit ,  I used the changed code by the way I listed below (both codes). But one problem when I click on language without select anything the error appears in time section.
// Select Language

function validateSelect(language){ 
   var myValue = document.getElementById('language').value;
   if(myValue > 0){
    document.getElementById('language').style.borderColor ='#80c75a';
    document.getElementById('languageError').style.display = "none";
    return true;
  }else{
   document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}

// Select time
function validateSelect(time){ 
   var myValue = document.getElementById('time').value;
   if(myValue > 0){
    document.getElementById('time').style.borderColor ='#80c75a';
    document.getElementById('timeError').style.display = "none";
    return true;
  }else{
   document.getElementById('time').style.borderColor ='#e35152';
    return false;
  }
}

my html is below:

<div class="field_wrap"><select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
  <option value="0" disabled selected>Prefered Language</option>
  <option value="1">English</option>
  <option value="2">Hindi</option>
  <option value="3">Tamil</option>
  <option value="4">Malayalam</option>
</select></div>
<div class="field_wrap"><select name="time" id="time" onblur="validateSelect(time)" class="select_promo">
  <option value="0" disabled selected>Time to Contact</option>
  <option value="1">8 - 10 AM</option>
  <option value="2">10 - 12 AM</option>
  <option value="3">12 - 2 PM</option>
  <option value="4">2 - 5 PM</option>
  <option value="5">5 - 8 PM</option>
</select></div>
joined on
October 10,2013
Replied on November 26,2015

Create different method names like validateLanguageSelect() and validateTimeSelect()

or create only one method as validateSelect(item) and do not use hard coded values like 'language' or 'time' in your javascript method.

Write Answer









Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us