• Eddie Bates
  • NEWBIE
  • 0 Points
  • Member since 2011

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 2
    Questions
  • 1
    Replies

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" >

I'm looking for a book/online resource, thats like an Apex Trigger cookbook, showing lots of examples and instructions about writing Triggers in Apex
Does anyone have any suggestions, apart from the obvious: Apex Developer Guide, Salesforce for Dummies, developer.force.com  etc...

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" >