+ Start a Discussion
bperry8086bperry8086 

How to do client-side javascript validations?

I'm working on a visualforce page to streamline data entry for my organization.  I find I need to do some client-side javascript validations.  I'm capturing data that I then use to create 4 related objects at once.  The page has a controller extension, so the object related to that controller extension gets its normal validations.  Failure is uglier if required data on the other objects isn't provided, so I'd like to head that off by making sure certain fields are filled in.

 

I've tried a few different ways of doing this, but not met with much success.  I think my problem is figuring out how to get a page element's ID via $component.  It seems like there should be an easier way to get an element's ID, but that the method I've found referenced here.  Can you point me toward good working examples of client-side validation or reliable way to get the ID of an element in a page?

 

The examples I've found here have a very simple page structure.  I'd like to figure out the correct $component... reference to LastNameFld in the code below.  Any suggestions are welcome.  Do any of you use some tool like Firebug to help unravel the code?

 

<apex:page standardController="Contact" extensions="FastContactEntryPageController">   
    <apex:form >       
        <apex:pageBlock title="Fast Contact Entry" mode="edit" id="FCEMainBlock" >
            <apex:outputPanel id="panelMsg">
                <apex:pagemessages ></apex:pagemessages>  
            </apex:outputPanel>
            
            <apex:outputPanel id="InputSec">                      
            <apex:pageBlockSection title="Scholar Contact" id="sc1" columns="2">
            <apex:pageBlockSectionItem >
            <apex:commandButton value="Save" id="theSaveButton"  onclick="validation();"/><p/>

            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
            <apex:commandButton action="{!Cancel}" value="Cancel" id="theCancelButton"/><p/>
            </apex:pageBlockSectionItem>                          
            
            <apex:pageBlockSectionItem >
             Scholar First Name:<apex:inputField value="{!contact.FirstName}"/>
             </apex:pageBlockSectionItem>
                          
             <apex:pageBlockSectionItem id="lnsec">
             Scholar Last Name:<apex:inputField id="LastNameFld" value="{!contact.LastName}" />                          
             </apex:pageBlockSectionItem>    

 

Best Answer chosen by Admin (Salesforce Developers) 
ClintLeeClintLee

Have you seen this post by Wes Nolte, yet?

 

http://th3silverlining.com/2010/03/02/visualforce-form-validation-enhanced/

 

It's a great walk-thru using jQuery for client-side form validation.

 

~ Clint

All Answers

ClintLeeClintLee

Have you seen this post by Wes Nolte, yet?

 

http://th3silverlining.com/2010/03/02/visualforce-form-validation-enhanced/

 

It's a great walk-thru using jQuery for client-side form validation.

 

~ Clint

This was selected as the best answer
bperry8086bperry8086

Thanks for pointing that out.  It looks like a powerful and comprehensive solution.

 

Looks like it may take me a bit of time to get it implemented.  I'm new to jQuery, and it's not immediately clear how to get the jQuery validation to occur followed by my controller extension being called.  At the moment, I'm wrestling with getting the jQuery code loaded.  Either I've got the location wrong or there's a bad character in the file.  I'm sure I'll get it sorted out eventually.

Mahesh MMahesh M
Hi
ClintLee,
Can you Provide static Resource for Jquerry dowload link?

Thanks,