+ Start a Discussion
Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan 

Script validation is not working when included from StaticResource, Any Suggestions?

Hi,

 

I have a VF page that has validation for the field in the form when i include the script in the Static Resource.

Please help me regarding this issue.

 

VF page that is not working is below,

<apex:page controller="Sample">

<!-- Javascript -->
       <apex:includeScript value="{!URLFOR($Resource.scriptValidation, 'jsFolder/jj.js')}"/> 

<!-- Javascript -->

<apex:form > 

     <apex:outputLabel value="Account Name"/>
     <apex:inputText value="{!nam}" id="nam"/>
     <apex:commandButton value="Insert" onclick=" return validate();"/>
</apex:form>

</apex:page> 

 

VF page that was working fine when have a script inside the page instead of static resource is given below.

<apex:page controller="Sample">

<!-- Javascript -->
<apex:includeScript value="{!URLFOR($Resource.scriptValidation, 'jsFolder/jj.js')}"/>
<script type="text/javascript">

function validate()
{
var a = document.getElementById('{!

$Component.nam}').value;
if(a == '' || a == NULL )
{
alert("Account name is mandatory");
return false;
}
}
</script>
<!-- Javascript -->

<apex:form >

 

     <apex:outputLabel value="Account Name"/>
     <apex:inputText value="{!nam}" id="nam"/>
     <apex:commandButton value="Insert" onclick=" return validate();"/>
</apex:form>

</apex:page>

 

Please help me regarding this issue.

 

Best Answer chosen by Admin (Salesforce Developers) 
Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan

Hi,

 

I have found the solution for this.

 

This validation in Static resource is not working because of using $Component. If you are usign script in VF page to refer the ID of a VF page component, you can use document.getElementById('{!$Component.PageId.FormID.InputID}').value

 

But, you can't use the '{!$Component.}'.valueoutside the VF page while refering through static resource.  So, the format of referring the id value in the Script is document.getElementById("PageId:FormID:InputID").value.

 

PageId:FormID:InputID is the id generated by running the VF page. I got this by using Inspect Element option in the browser.

 

So, My VF page shopuld be like this,

<apex:page controller="Sample" id="pg">

<!-- Javascript -->
<apex:includeScript value="{!$Resource.scriptValidation}"/>
<!-- Javascript -->

<apex:form id="frm">

     <apex:outputLabel value="Account Name"/>
     <apex:inputText value="{!nam}" id="fn"/>
     <apex:commandButton value="Insert" onclick=" validate();"/>
</apex:form>

</apex:page>

 

 Script should be like the following,

<script type="text/javascript">
    function validate()  {
        var a = document.getElementById("pg:frm:fn").value;
        if(a == '' || a == NULL )    {
            alert("Account name is mandatory");            
        }      
        else  {            
            alert("Account has been inserted");          
        }
    }
</script>

 

Hope this may help for all...!

 

Anyways thanks for your reply...!

All Answers

bob_buzzardbob_buzzard

Have you checked the source of the page and tried to pull down the resources through the browser to make sure that the script is definitely included?

Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan

Hi,

 

Thanks for your reply. But, the script I include in VF page is not converted to HTML script while running the page.

 

I think so, that was the problem. Can you guess what should be done for this issue?

 

My page source shows the following,

 

 &lt;apex:includeScript value="{!URLFOR($Resource.scriptValidation, 'jsFolder/jj.js')}"/&gt;
  &lt;/head&gt;     // This should be converted somthing like '<Script src='<link>'/>

&lt;apex:form id="frm"&gt;
   
            &lt;apex:outputLabel value="Account Name"/&gt;
            &lt;apex:inputText value="{!nam}" id="nam"/&gt;              
        
            &lt;apex:commandButton value="Insert" onclick="validate();"/&gt;       
   
&lt;/apex:form&gt;

 

bob_buzzardbob_buzzard

Are those escape codes actually appearing in the HTML source?  Are you including the Visualforce markup from a static resource?

Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan
I have just copied the Page source to show you what is happening.

I'm not including those escape codes in VF page. My VF page is what is given below,

VF page that is not working is below,

<apex:page controller="Sample">

<!-- Javascript -->
<apex:includeScript value="{!URLFOR($Resource.scriptValidation, 'jsFolder/jj.js')}"/>

<!-- Javascript -->

<apex:form >

<apex:outputLabel value="Account Name"/>
<apex:inputText value="{!nam}" id="nam"/>
<apex:commandButton value="Insert" onclick=" return validate();"/>
</apex:form>

</apex:page>
Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan

Hi,

 

I have found the solution for this.

 

This validation in Static resource is not working because of using $Component. If you are usign script in VF page to refer the ID of a VF page component, you can use document.getElementById('{!$Component.PageId.FormID.InputID}').value

 

But, you can't use the '{!$Component.}'.valueoutside the VF page while refering through static resource.  So, the format of referring the id value in the Script is document.getElementById("PageId:FormID:InputID").value.

 

PageId:FormID:InputID is the id generated by running the VF page. I got this by using Inspect Element option in the browser.

 

So, My VF page shopuld be like this,

<apex:page controller="Sample" id="pg">

<!-- Javascript -->
<apex:includeScript value="{!$Resource.scriptValidation}"/>
<!-- Javascript -->

<apex:form id="frm">

     <apex:outputLabel value="Account Name"/>
     <apex:inputText value="{!nam}" id="fn"/>
     <apex:commandButton value="Insert" onclick=" validate();"/>
</apex:form>

</apex:page>

 

 Script should be like the following,

<script type="text/javascript">
    function validate()  {
        var a = document.getElementById("pg:frm:fn").value;
        if(a == '' || a == NULL )    {
            alert("Account name is mandatory");            
        }      
        else  {            
            alert("Account has been inserted");          
        }
    }
</script>

 

Hope this may help for all...!

 

Anyways thanks for your reply...!

This was selected as the best answer