function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sudhir_MeruSudhir_Meru 

How to validate select list using javascript in visualforce

Hi,

  I am not able to check --none-- default value that is displayed in select list using javascript. Please suggest me how to validate

   If selectlist display --none-- it must alert a message to user I am calling javascipt on a button click

  Below highlighted is a selectlist code

Visual Force
---------------

<script type="text/javascript">
function Opportunity_Validation()
{
  var val   = document.getElementById('{!$Component.RenewalForm.configblock.configsecblock.confignewopp.newopp}').value; 
  var oval  = document.getElementById('{!$Component.RenewalForm.configblock.configsecblock.configopport.existopp}').value; 
  var edate = document.getElementById('{!$Component.RenewalForm.configblock.configsecblock.configexpiredate.expredate}').value; 
  var eterm = document.getElementById('{!$Component.RenewalForm.configblock.configsecblock.configexpiredate.expterms}').value; 
                                   
 
   if ( val == '' && oval == '') {
    alert('Enter Opportunity Details');
    return false;
    }
   else if ( val != '' && oval != '') {
     alert('Enter either existing opportunity or new opporutnity');
     return false;
     }
   else if ( edate == '' ) {
     alert('Enter Expire Date');
     return false;
     }
   else if ( eterm == 'none' ) {
     alert('Select Expite Term');
     return false;

     } 
    return true;
  }
</script>




<apex:form id="RenewalForm">
<apex:pageBlock id="configblock">
<apex:pageBlockSection title="Configuration Option" columns="2" id="configsecblock">

  <apex:pageBlockSectionItem id="configexpire">
   <apex:outputLabel value="Expiry Term:" for="expireterm"/>
   <apex:selectList value="{!ExpireTerms}" multiselect="false" size="1" id="expterms">
                <apex:selectOption itemValue="0" itemLabel="--none--" id="exptermsnon"/>
                <apex:selectOption itemValue="1" itemLabel="1 Year"/>
                <apex:selectOption itemValue="3" itemLabel="3 Year"/>
                <apex:selectOption itemValue="5" itemLabel="5 Year"/>
    </apex:selectList>
   </apex:pageBlockSectionItem>

Thanks
Sudhir
Best Answer chosen by Sudhir_Meru
Arunkumar RArunkumar R
Hi Sudhir ,

Here is the Sample Code for your problem..

<apex:page controller="SelectListController">
<script>
 
function Opportunity_Validation()
{
  var eterm=document.getElementById('{!$Component.RenewalForm:configblock:configsecblock:configexpire:expterms}').value;
  
  if(eterm=='0')
  {
  alert('Select Expite Term');
  }
 
  }
</script>

<apex:form id="RenewalForm">
<apex:pageBlock id="configblock">
<apex:pageBlockSection title="Configuration Option" columns="2" id="configsecblock">

  <apex:pageBlockSectionItem id="configexpire">
   <apex:outputLabel value="Expiry Term:" for="expireterm"/>
   <apex:selectList value="{!ExpireTerms}" multiselect="false" size="1" id="expterms" onchange="Opportunity_Validation();">
                <apex:selectOption itemValue="0" itemLabel="--none--" id="exptermsnon"/>
                <apex:selectOption itemValue="1" itemLabel="1 Year"/>
                <apex:selectOption itemValue="3" itemLabel="3 Year"/>
                <apex:selectOption itemValue="5" itemLabel="5 Year"/>
    </apex:selectList>
   </apex:pageBlockSectionItem>
   </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>


Since JavaScript all identifiers are case sensitive. So make sure while initializing identifiers.

The variables lastName and lastname, are two different variables.

The functions myFunction and myfunction, are two different functions.

JavaScript does not interpret Var; as var.

All Answers

Saurabh DhobleSaurabh Dhoble
Replace this --
else if ( eterm == 'none' ) {
with this --
else if ( eterm == '--None--' ) {
Let me know if this helps.

Arunkumar RArunkumar R
Hi Sudhir ,

Here is the Sample Code for your problem..

<apex:page controller="SelectListController">
<script>
 
function Opportunity_Validation()
{
  var eterm=document.getElementById('{!$Component.RenewalForm:configblock:configsecblock:configexpire:expterms}').value;
  
  if(eterm=='0')
  {
  alert('Select Expite Term');
  }
 
  }
</script>

<apex:form id="RenewalForm">
<apex:pageBlock id="configblock">
<apex:pageBlockSection title="Configuration Option" columns="2" id="configsecblock">

  <apex:pageBlockSectionItem id="configexpire">
   <apex:outputLabel value="Expiry Term:" for="expireterm"/>
   <apex:selectList value="{!ExpireTerms}" multiselect="false" size="1" id="expterms" onchange="Opportunity_Validation();">
                <apex:selectOption itemValue="0" itemLabel="--none--" id="exptermsnon"/>
                <apex:selectOption itemValue="1" itemLabel="1 Year"/>
                <apex:selectOption itemValue="3" itemLabel="3 Year"/>
                <apex:selectOption itemValue="5" itemLabel="5 Year"/>
    </apex:selectList>
   </apex:pageBlockSectionItem>
   </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>


Since JavaScript all identifiers are case sensitive. So make sure while initializing identifiers.

The variables lastName and lastname, are two different variables.

The functions myFunction and myfunction, are two different functions.

JavaScript does not interpret Var; as var.
This was selected as the best answer