0

I have a small problem with a validation here

  <script>
    function myFunction(V) {
        var inputcpf = document.getElementById("CPF");
        var inputcnpj = document.getElementById("CNPJ");

        if(V.Value =='CPF'){
            inputcpf.style.display='block';
            inputcpf.required=True;
            inputcnpj.style.display='none';
            inputcnpj.removeattribute("required");
        }else{
            inputcnpj.style.display='block';
            inputcnpj.required=True;
            inputcpf.style.display='none';
            inputcpf.removeattribute("required");                

        }

    }    

    </script>

<apex:selectRadio styleClass="radioinput" onChange="myFunction(this);">
                        <apex:selectOption itemlabel="CPF" itemValue="CPF" />   
                        <apex:selectOption itemlabel="CNPJ" itemValue="CNPJ"/> 
                    </apex:selectRadio>     

                <td><apex:inputField style="display:none" id="CPF" value="{!Cliente__c.CPF__c}"/></td>                    
                <td><apex:inputField style="display:none" id="CNPJ" value="{!Cliente__c.CNPJ__c}"/></td>   

I want, when I click on cpf, hide cnpj and remove the true request, and the reverse as well. But the function is not working :(

  • 1
    Hi Joanes, welcome to SFSE. Can you edit your question to be clear about what help you need? It looks like you've written the code; if you're having a specific problem or error, please describe it in detail. – David Reed Mar 20 at 2:19
1

JavaScript simply isn't going to work here. Even if you got as far as showing/hiding the fields, the net result would be that you'd get errors when interacting with the controller.

However, while we're on that topic, your JS has two main problems. First, ID values on apex namespace components are "mangled" by the system, so you need to use $Component variable, and second, JavaScript is cAsE-sEnSiTiVe, so it would have been V.value, not V.Value.

The Visualforce way of doing this would be to use apex:actionSupport:

<apex:actionRegion>
  <apex:selectRadio styleClass="radioinput" value="{!typeSelection}">
    <apex:selectOption itemlabel="CPF" itemValue="CPF" />
    <apex:selectOption itemlabel="CNPJ" itemValue="CNPJ"/>
    <apex:actionSupport event="onchange" reRender="CPF,CNPJ" />
  </apex:selectRadio>
</apex:actionRegion>
<apex:outputText rendered="{!typeSelection='CPF'}" id="CPF">
  <td><apex:inputField required="true" value="{!Cliente__c.CPF__c}"/></td>                    
</apex:outputText>
<apex:outputText rendered="{!typeSelection='CPNJ'}" id="CNPJ">
  <td><apex:inputField required="true" value="{!Cliente__c.CNPJ__c}"/></td>  
</apex:outputText>

Additional tweaks may be necessary, but this should get you started.

  • this error appeared -> Unknown property 'Cliente__cStandardController.typeSelection' how would I do in the code the use of $Component variable? – Joanes Cavalcanti Mar 20 at 3:13
  • @JoanesCavalcanti You need an extension/controller to store the data to. – sfdcfox Mar 20 at 3:14
  • I understood, I did this exercise last year, but it was a simpler way. I think it was hide and show the div, I just used javascript function. Could I do this using just the javascript? I'm starting a short time ago :) – Joanes Cavalcanti Mar 20 at 3:24
  • @JoanesCavalcanti You can do it in all HTML/JS, or you can do it in Visualforce. You can't mix them this way because it will cause errors the user will be unable to resolve. display:none won't make the field not required, and setting/clearing the required attribute won't affect its Visualforce behavior. It is non-trivial to mix the two techniques. – sfdcfox Mar 20 at 3:27
  • Okay, I'll try. thanks!!! – Joanes Cavalcanti Mar 20 at 3:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.