function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rahul Gupta 176Rahul Gupta 176 

Validation rules on the vf page

<apex:page standardController="Contact"  sidebar="false" >
  <apex:form >
    <apex:pageBlock title="Edit Contact">
      <apex:pageBlockSection columns="1">
         <apex:inputField value="{!Contact.FirstName}"/>
         <apex:inputField  value="{!Contact.LastName}"/>
         <apex:inputField value="{!Contact.Email}"/>
         <apex:inputField value="{!Contact.Birthdate}"/>
         <apex:inputField type="number" value="{!Contact.Phone}"/>
      </apex:pageBlockSection>

      
    <apex:pageBlockButtons >
         <apex:commandButton action="{!save}" value="Save"/>
    </apex:pageBlockButtons>
   
    </apex:pageBlock>
  
   </apex:form>
  
</apex:page>

I want to validate the phone field that it should have 10 digits only and last name should have text only so how to use extension . 
Not getting way to do it . 
Please help 
Best Answer chosen by Rahul Gupta 176
Amit Singh 1Amit Singh 1
Ok,

Use below code. 
<apex:page standardController="Contact"  sidebar="false" docType="html-5.0">
  <apex:form >
    <apex:pageBlock title="Edit Contact">
      <apex:pageBlockSection columns="1">
         <apex:inputField value="{!Contact.FirstName}"/>
         <apex:inputField id="lastname" value="{!Contact.LastName}" onchange="allLetter();" />
         <div id="err2" style="margin-left: 450px;margin-top: -28px;" ></div>
         <script type="text/javascript">
            function allLetter()  
             {  
               
                var letters = /^[A-Za-z]+$/;  
                var inputtxt=document.getElementById("j_id0:j_id1:j_id2:j_id3:lastname").value;
                if(!inputtxt.match(letters))  
                {  
                  document.getElementById("err2").innerHTML="Last Name must be text only";
                }else{
                  document.getElementById("err2").innerHTML="Valid Name";
                }                
              }  
         </script>
         <apex:inputField value="{!Contact.Email}"/>
         <apex:inputField value="{!Contact.Birthdate}"/>
         <apex:inputField id="phone" value="{!Contact.Phone}" onchange="checkPhone();" />
         <div id="err1"></div>
          <script type="text/javascript">
              function checkPhone(){
                 
                 var phone=document.getElementById("j_id0:j_id1:j_id2:j_id3:phone").value;
                 var letters = /^[A-Za-z]+$/;
                 if(phone.length!=10 || phone.match(letters))
                    document.getElementById("err1").innerHTML="Phone must be 10 digits long. OR Can not contain Letters.";
                 else
                    document.getElementById("err1").innerHTML="Valid Phone Number";
              }
          </script>
        
      </apex:pageBlockSection>

      
    <apex:pageBlockButtons >
         <apex:commandButton action="{!save}" value="Save"/>
    </apex:pageBlockButtons>
   
    </apex:pageBlock>
  
   </apex:form>
   
</apex:page>
Let me know if this helps :)
Thanks!
Amit Singh
 

All Answers

Rahul Gupta 176Rahul Gupta 176
this is the error i  am getting

Error: Attribute 'type' on component <apex:inputField> in '/apex/newContact' requires HTML docType version 5.0 or higher in newContact at line 21 column 103
Amit Singh 1Amit Singh 1
Ok,

Use below code. 
<apex:page standardController="Contact"  sidebar="false" docType="html-5.0">
  <apex:form >
    <apex:pageBlock title="Edit Contact">
      <apex:pageBlockSection columns="1">
         <apex:inputField value="{!Contact.FirstName}"/>
         <apex:inputField id="lastname" value="{!Contact.LastName}" onchange="allLetter();" />
         <div id="err2" style="margin-left: 450px;margin-top: -28px;" ></div>
         <script type="text/javascript">
            function allLetter()  
             {  
               
                var letters = /^[A-Za-z]+$/;  
                var inputtxt=document.getElementById("j_id0:j_id1:j_id2:j_id3:lastname").value;
                if(!inputtxt.match(letters))  
                {  
                  document.getElementById("err2").innerHTML="Last Name must be text only";
                }else{
                  document.getElementById("err2").innerHTML="Valid Name";
                }                
              }  
         </script>
         <apex:inputField value="{!Contact.Email}"/>
         <apex:inputField value="{!Contact.Birthdate}"/>
         <apex:inputField id="phone" value="{!Contact.Phone}" onchange="checkPhone();" />
         <div id="err1"></div>
          <script type="text/javascript">
              function checkPhone(){
                 
                 var phone=document.getElementById("j_id0:j_id1:j_id2:j_id3:phone").value;
                 var letters = /^[A-Za-z]+$/;
                 if(phone.length!=10 || phone.match(letters))
                    document.getElementById("err1").innerHTML="Phone must be 10 digits long. OR Can not contain Letters.";
                 else
                    document.getElementById("err1").innerHTML="Valid Phone Number";
              }
          </script>
        
      </apex:pageBlockSection>

      
    <apex:pageBlockButtons >
         <apex:commandButton action="{!save}" value="Save"/>
    </apex:pageBlockButtons>
   
    </apex:pageBlock>
  
   </apex:form>
   
</apex:page>
Let me know if this helps :)
Thanks!
Amit Singh
 
This was selected as the best answer
Alexander Charles GilfellonAlexander Charles Gilfellon
<apex:page standardController="Contact"  sidebar="false" docType="html-5.0" >
        
    <script type="text/javascript">
    function validate()  
             {  
               var letters = /^[A-Za-z]+$/;  
               var inputtxt = document.getElementById('{!$Component.theForm.pgblk.pgblksec.lastname}').value;
               var varphone = document.getElementById('{!$Component.theForm.pgblk.pgblksec.phone}').value;
                
                if(!inputtxt.match(letters))  
                {  
                  document.getElementById("error1").innerHTML="Last Name must be text only";
                }
                else if(varphone.length!=10)
                {
                  document.getElementById("error2").innerHTML="Phone must be 10 digits long";
                }
                else
                {
                    Save();
                
                }
              } 
           
     </script>
  
 <body id="thebody" >
     
      
  <apex:form id="theForm" >
    <apex:pageBlock title="Edit Contact" id="pgblk" >
      <apex:pageBlockSection columns="1" id="pgblksec" >
         <apex:inputField value="{!Contact.FirstName}"/>
         <apex:inputField id="lastname" value="{!Contact.LastName}" ></apex:inputField>
           <span id="error1" style="color:red;display:block"/>
         <apex:inputField value="{!Contact.Email}"/>
         <apex:inputField value="{!Contact.Birthdate}"/>
         <apex:inputField id="phone" value="{!Contact.Phone}" required="true" styleClass="phn"  />
           <span id="error2" style="color:red;display:block"/>
      </apex:pageBlockSection>
   <apex:actionFunction name="Save" action="{!save}"/>
      </apex:pageBlock> 
   </apex:form>
        <Button  onclick="validate();" value="Save">save</Button>
   </body> 
</apex:page>

The above is to just give you an idea of how validation can be used in VF pages for standard controllers. The code can be further improved to your liking.
Rahul Gupta 176Rahul Gupta 176
Amit singh Sir your code works perfectly fine but can you explain me in line 11  and line 29 the id used there .. what are these


thanks to others too
Amit Singh 1Amit Singh 1
Rahul,

Glad to here that it works for you. Sure

Line 11 and 29 are fetching the value of input fields using a unique id as Salesorce generates a unique Id for each component.

For more information please refer below link:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_variables_global_component.htm

Thanks!
Amit Singh