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
Eddie BatesEddie Bates 

JQuery Validation with Visualforce

Has anyone got validation with JQuery working on drop down lists on a visualforce page, as I currently can only validate input fields, although my code works fine on a normal HTML page. I've added the JQuery noConflict function and stripped out any colons in the id name of the form etc... Anyone has any joy sure let me know, thanks:

 

<apex:page sidebar="false" showheader="false" standardstylesheets="false">

 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'jquery.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'jquery.validate.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'jquery.maskedinput-1.0.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'ui.core.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'ui.accordion.js')}"/>

<script type="text/javascript">
 var j$=jQuery.noConflict();
 
j$(document).ready(function(){

    function jq(myid) {
          return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
       }
       
    var f = '{!$Component.cmaForm}';

    j$("#recordClientPhone").mask("(999) 999-9999");
    j$("#recordClientPhoneAlt").mask("(999) 999-9999");
    j$("#recordClientZip").mask("99999");
    j$("#recordPropertyZip").mask("99999");  
    j$("#recordPurchaseZip").mask("99999");  

    // add * to required field labels
    j$('label.required').append('&nbsp;<strong>*</strong>&nbsp;');

    // accordion functions
    var accordion = j$("#stepForm").accordion();
    var current = 0;
    
    j$.validator.addMethod("pageRequired", function(value, element) {
        var j$element = j$(element)
        function match(index) {
            return current == index && j$(element).parents("#sf" + (index + 1)).length;
        }
        if (match(0) || match(1) || match(2)) {
            return !this.optional(element);
        }
        return "dependency-mismatch";
    }, j$.validator.messages.required)

    
    var v = j$(jq(f)).validate({
        errorClass: "warning",
        onkeyup: false,
        onblur: false,
        submitHandler: function() {
            alert("Submitted, thanks!");
        }
    });
    
    // back buttons do not need to run validation
    j$("#sf2 .prevbutton").click(function(){
        accordion.accordion("activate", 0);
        current = 0;
    });
    j$("#sf3 .prevbutton").click(function(){
        accordion.accordion("activate", 1);
        current = 1;
    });
    // these buttons all run the validation, overridden by specific targets above
    j$(".open2").click(function() {
      if (v.form()) {
        accordion.accordion("activate", 2);
        current = 2;
      }
    });
    j$(".open1").click(function() {
      if (v.form()) {
        accordion.accordion("activate", 1);
        current = 1;
      }
    });
    j$(".open0").click(function() {
      if (v.form()) {
        accordion.accordion("activate", 0);
        current = 0;
      }
    });
 
});
</script>

 <apex:stylesheet value="{!URLFOR($Resource.JQuery2, 'style.css')}"/>
 <apex:stylesheet value="{!$Resource.InsuranceCSS}"/>
 <style type="text/css">
.defaultTableColor {
    background-color: white;
}
.tableRollOverEffect1 {
    background-color: #FAF0E6;
    color: #FFF;
}
.tableRollOverEffect2 {
    background-color: #FAF0E6;
    color: #FFF;
}
.tableRowClickEffect1 {
    background-color: #fe0012;
    color: #FFFFFF;
}
.tableRowClickEffect2 {
    background-color: #00F;
    color: #FFF;
}
</style>


<apex:form title="cmaForm" id="cmaForm" >

sfdcfoxsfdcfox

You shouldn't monkey with the ID values, though... just use getElementById or getElementsByTagName and pass that into the jQuery function. Or, escape the colons using the double-escaped notation (i.e. record\\:block\\:field). It looks like jquery.validate uses a custom class name to make it's magic work. You should be able to apply a class to the elements if you'd want to go that route. Could you write up a short example that clearly outlines the issue, preferably one that we could replicate in our local dev org?

Eddie BatesEddie Bates

Sure here is a link to the solution I'm developing:

JQuery Test Page

 

If you view the page source you'll be able to copy over the Jquery files that I have stored in salesforce as a static resource:

 

<apex:includeScript value="{!URLFOR($Resource.JQuery2, 'jquery.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'jquery.validate.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'jquery.maskedinput-1.0.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'ui.core.js')}"/>
 <apex:includeScript value="{!URLFOR($Resource.JQuery2, 'ui.accordion.js')}"/>

 

<apex:stylesheet value="{!URLFOR($Resource.JQuery2, 'style.css')}"/>
 <apex:stylesheet value="{!$Resource.InsuranceCSS}"/>

 

Basically one you click on the next button, the drop down lists should fire a validation if nothing is selected, if you click through you'll see that only the input fields are being validated.

 

I'm guessing the problem might be after the j$.validator.addMethod call, which is on the JQuery Test Page.

 

Thanks for your help

Artic MonkeyArtic Monkey

I Solved the JQuery validation from drop down's in Visualforce.

 

when writing the select list make sure the first one is completely blank like so:

 

<option value=""></option>

 

Don't add a value that the user can see i.e.

 

<option value="">-Select-</option>

 

as this was stopping the validation from working.

SathyaincampusSathyaincampus

I am trying to do this Jquery validation stuff and facing problems if I have an ajax operation.

Mentioned the details here.. Can someone help? :(

 

http://stackoverflow.com/questions/10996156/jquery-validation-for-visualforce-for-apexcommandbutton-input-type-button-aja

 

Regards

Sathya