function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
bperry8086bperry8086 

Getting JQuery validation working in Saleforce?

This technique looks like it will save a lot of trouble – if I can get it to work for me.

 

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

 

I’m currently getting a “element is undefined” (according to Firefox) error on the jquery validate script. I’m current loading the jquery code via these lines:

 

<apex:includeScript value="{!$Resource.jquery1_3_2}"/>
<apex:includeScript value="{!$Resource.jquery_validate1_6}"/>

 

I’m using jquery 1.3.2 and the jquery validate plugin 1.6 (same as in this example).

 

Any ideas on what I’m doing wrong would be welcome.

 

Is the following page structure critical to this technique?

 

<apex:define name="content">   
   <apex:outputPanel layout="block" style="text-align:center; font-size:12px;padding: 4px">
      <apex:form id="commentForm" >
...

 

My form isn’t wrapped by a define or an output panel.

 

GeneRegistryGeneRegistry

Were you able to get this to work at all? My jquery validator doesn't work AT ALL.


Here are the include filed:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

 


Here's my code for the actual jquery

<script>
			$(document).ready(function() {
			
				$('.form2validate').validate();
				
				$('.email2validate').rules("add",{
	                required: true,
	                email: true
            	});
            	
            	$('.bFirstName').rules("add",{
	                required: true
            	});
            	
            	$('.bLastName').rules("add",{
	                required: true
            	});
            	
            	$('.bRole').rules("add",{
	                required: true
            	});
            	
            	$('.areaCode').rules("add",{
	                required: true
            	});
            	
            	$('.firstThree').rules("add",{
	                required: true
            	});
            	
            	$('.lastFour').rules("add",{
	                required: true
            	});
            	
            	$('.zipCode').rules("add",{
	                required: true
            	});
            	
            	$('.timeToCall').rules("add",{
	                required: true
            	});
            	
            	$('.fFirstName').rules("add",{
	                required: true
            	});
            	
            	$('.fLastName').rules("add",{
	                required: true
            	});
            	
            	$('.fRole').rules("add",{
	                required: true
            	});
            	
            	$('.budget').rules("add",{
	                required: true
            	});
            	
            	$('.datepicker1').rules("add",{
	                required: true
            	});
            	
            	jQuery.validator.messages.required = "Field was left blank!";
            	jQuery.validator.messages.email = "Your email contains invalid characters!";
			});
		</script>

 and here is what some of the actual inputFields as well as my commandButton looks like:


<apex:form styleClass="form2validate" id="destWeddingForm">

   <apex:inputText size="23" maxlength="50" id="firstName" value="{!FirstName}" styleClass="bFirstName" />

   <apex:commandButton styleClass="submit" id="submitId" style="background-image: url('{!URLFOR($Resource.DestinationWeddings, 'DestinationWeddings/images/raq_dw_btn1_rest.gif')}'); border: none;" action="{!proceedToStep2}" onmouseover="ImageOver(this);" onmouseout="ImageNormal(this);" onclick="validate();" />

</apex:form>

 
Some explanation for my command button: originally, when I used the image attribute, it wes rendering as type="image" when converted to HTML as opposed to type="submit" so I figured that may have been causing the error. It wasn't and it still doesn't work.

Any help would be appreciated.

bperry8086bperry8086

I have not gotten jquery validation working yet.  

 

I attended the Salesforce advanced office hours last week where they gave me a few alternatives to jquery (manually creating the element IDs and server-side validation in the submit code).  These may do what I need.  I've been on vacation and haven't had a chance to try either yet.

 

Even if these do work, I plan to bring the question to Dreamforce so I can figure out what I'm doing wrong with jquery.  Looks like a good approach, I just haven't been able to get it working.

GeneRegistryGeneRegistry

Thanks for the upate.

I too posted at The Silver Lining and am now awaiting a response. I just can't figure out what I am doing wrong.

bperry8086bperry8086

Are you getting an error message that makes it look like there's a problem in the jquery javascript code itself?  That's what I was seeing.  I had to switch to Firefox to get that because Chrome seemed to provide less useful info on errors.

GeneRegistryGeneRegistry

No, I'm not getting any error messages. It's simply not doing anything.

Learn Apex and Visual ForceLearn Apex and Visual Force

Hey guys, did you get this working. It's working for me in Firefox but not in updated version of chrome 21.0.1180.75 m. It used to work in older versions of chrome for me but it stopped working recently. 

 

Any Idea, why?