Home  >  Forum  >  JavaScript
Post New Query

validate select is not working



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;
  }
}



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.




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


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;
  }
}




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>









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;
  }
}



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>



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>



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




©2019 concretepage.com | Privacy Policy | Contact Us