+ Start a Discussion
muneeswar umuneeswar u 

javascript inputfield validation not working in vf page.Please respond immediately

<apex:page>

   <script>     
    function errorHandling()
    {
        alert('clicked save');
        alert(document.getElementById('{!$Component.fm:pb:sectionQty:pbsQ:dateQ}'));
        var validate=document.getElementById('{!$Component.fm:pb:sectionQty:pbsQ:dateQ}').value; 
        
        if(validate == '')
        {
            alert('please enter the Name');
            // return false;
        }    
        else
        {
           alert('else');
            save();
            
        }       
    }    
    </script>

    <apex:form rendered="{!!recordsTable}" id="fm" >      
        <apex:actionFunction name="save" action="{!save}"  />

        <apex:pageBlock rendered="{!!recordsTable}" id="pb">                    
            <div id="sectionQty">                
                <apex:pageBlockSection title="Establish Quantity Schedule" collapsible="false" columns="1" id="pbsQ" >
                    <apex:input label="Start Date" type="date" value="{!datefieldQty}" id="dateQ" /> 
                </apex:pageBlockSection>  
            </div>          
            
            <apex:pageBlockButtons location="bottom" >                 
                <apex:commandButton value="Save" onclick="errorHandling();return false;" />  
            </apex:pageBlockButtons>            
        </apex:pageBlock>          
    </apex:form>
  </apex:page>
Rishab TyagiRishab Tyagi
Hello Muneeswar,

It seems like the solution to your problem lies in your id getting method. You need to use $Component.fm:pb:pbsQ:dateQ as the component code. You do not need to add sectionQty in the above code as it is not the ID of a VF tag, rather the id belongs to an HTML tag.

Hope that answers your question.
muneeswar umuneeswar u
Hii Rishab,

Even date is filled still getting error.

function errorHandling()
    {
        alert('clicked save');
        alert(document.getElementById('{$Component.fm.pb.pbsQ.dateQ}'));
        var validate=document.getElementById('{$Component.fm.pb.pbsQ.dateQ}');
        //alert(validate);
        if(validate == '' || validate == null)
        {
            alert('please enter the Date');
            // return false;
        }    
        else  
        { 
               alert('else');
            save();            
        }       
    }
Shiva RajendranShiva Rajendran
Hi Muneeswaran,
I think you have obtained the component and checked it for null.
Compare the value 
use 
if(validate==null || validate.value=='')
This way you are checking the value instead of the component
In your case if validate component is fetched correctly , it will always return true
Also try to use JQuery approach to get the inputField instead of this way.That way more easier and less cumbersome.
Thanks,
Shiva RV
 
Rishab TyagiRishab Tyagi
Agree with Shiva. Muneeswar you need to check the value not the component. I had my focus on getting the component id correct and did not check for others errors that might have existed.