Apex Code Development You need to sign in to do that
Don't have an account?
Need example javascript for required field validation and controlling/dependent picklist for basic form on site.com
I am a salesforce admin, non-developer. I'm putting together a very simple request form using Site.com for our users to submit a request into our team. I'd would like to perform simple validation rules (make a text field required where the field can't be indicated as required in Salesforce) and I would have liked to be able to do dependent/controlling picklist, like we can in Salesforce. I heard that in order to achieve this, I would need to add javascript.
Can someone provide me with javascript code and teach me where to make changes? I'm more of a copy and paste code gal than one who codes from scratch. Why make from scratch when I can just modify? LOL.
Any help a developer can provide would be greatly appreciated.
Thank you,
Jen
Can someone provide me with javascript code and teach me where to make changes? I'm more of a copy and paste code gal than one who codes from scratch. Why make from scratch when I can just modify? LOL.
Any help a developer can provide would be greatly appreciated.
Thank you,
Jen
<apex:page standardcontroller="Contact" showHeader="false" > <apex:form> <apex:pageBlock> <apex:pageBlockButtons> <apex:commandButton value="Submit" action="{!save}" onclick="return validateReglementFields();"/> </apex:pageBlockButtons> <table class="detailList" cellspacing="0" cellpadding="0" border="0"> <tr> <td class="labelCol">First Name</td> <td class="dataCol"> <div class="requiredInput"> <div class="requiredBlock"></div> <apex:inputText styleClass="jq_req" value="{!Contact.FirstName}" required="false"/> </div> </td> </tr> <tr> <td class="labelCol">Last Name</td> <td class="dataCol"> <div class="requiredInput"> <div class="requiredBlock"></div> <apex:inputText styleClass="jq_req" value="{!Contact.LastName}" required="false"/> </div> </td> </tr> <tr> <td class="labelCol">Phone</td> <td class="dataCol"> <div class="requiredInput"> <div class="requiredBlock"></div> <apex:inputText styleClass="jq_req" value="{!Contact.Phone}" required="false"/> </div> </td> </tr> <tr> <td class="labelCol">Email</td> <td class="dataCol"> <div class="requiredInput"> <div class="requiredBlock"></div> <apex:inputText styleClass="jq_req" value="{!Contact.Email}" required="false"/> </div> </td> </tr> </table> </apex:pageBlock> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script> if(typeof jQuery != 'undefined'){ $j =jQuery.noConflict(); } //2.ADDING AND REMOVING ERRORS ON PAGE function jq_addError(me,msg){ if(!($j(me).hasClass('error'))){ $j(me).addClass("error"); $j(me).parent().append("<div class='errorMsg'>" + msg + "</div>"); } else{ $j(me).siblings('.errorMsg').remove(); $j(me).parent().append("<div class='errorMsg'>" + msg + "</div>"); } } function jq_removeError(me){ if($j(me).hasClass('error')){ $j(me).removeClass("error"); $j(me).siblings('.errorMsg').remove(); } } //3.VALIDATE FOR REQUIRED BLANK FIELDS function validateReglementFields(){ var b = true; $j('.jq_req').each(function(){ if($j(this).val().length == 0){ jq_addError($j(this),"<b>Error:</b>This field is required"); b = false; } else{ jq_removeError($j(this)); } }); return b; } </script> </apex:form> </apex:page>How do you want to have the dependent picklist build, can you elaborate with an example ?
I did a copy and paste of the Web form I created in Site.com. I want all fields on the form to be required.
For the controlling picklist...For example, if you select "JH Org" for the Salesforce org, I only want the user to only be able to select PFSDev, Dev, QA and Production. For Insurance, I want the user to only be able to select C1Dev, CEDev, CEDev2, NBRDev, Dev, C1QA, C1QA2, Production. And lastly for Investments, I want the user to only be able to select INVDev, Dev, QA and Production.
Thank you in advance,
Jen
<!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' style="display:none !important;">
<head>
<title>
request </title>
<script type="text/javascript">
//<![CDATA[
try{(function(){var w=self,l,p,o;if(w&&top){for(;w!==top&&(p=w.parent)&&p!==w&&(o=p.location)&&o.protocol===(l=w.location).protocol&&(o.host===l.host||(p.document&&p.document.domain===w.document.domain));w=p);if(w!==top)throw "";}({f:function(){document.documentElement?document.documentElement.style.display="":(!this.a&&(this.a=10),this.a<1E5&&(window.sfdcRetryShowWindow=this)&&setTimeout("sfdcRetryShowWindow.f()",this.a),this.a*=2)}}.f())})();}catch(e){if(top!==self)top.location=location;else throw e;}//]]></script><link href='/s/SiteStyleSheet?v=6&SiteID=0DM170000004Ceq' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/jquery/jquery.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/Runtime/PicassoRuntime.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/jquery/ui/jquery.ui.core.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/jquery/jqueryui/jquery.ui.datepicker.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/jquery/jqueryui/jquery.ui.widget.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/jquery/jqueryui/jquery.ui.mouse.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/jquery/jqueryui/jquery.ui.slider.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/jquery/jqueryui/jquery.ui.timepicker-addon.js?r=1.201601282217050130'>
</script>
<script type='text/javascript' src='/s/sfsites/assets/Scripts/Runtime/PicassoRuntime.DateTime.js?r=1.201601282217050130'>
</script>
<link type='text/css' rel='stylesheet' href='/sfsites/assets/Scripts/jquery/jqueryui/themes/siteforce/jquery.ui.all.css' />
<link type='text/css' rel='stylesheet' href='/sfsites/assets/Styles/CustomDatePickerRHS.css' />
<link type='text/css' rel='stylesheet' href='/sfsites/assets/Scripts/jquery/jqueryui/themes/siteforce/jquery.ui.datepicker.css' />
</head>
<body itemid="body">
<div id="request">
<div id="header">
</div>
<div id="content" style="overflow:hidden;">
<form class="FormWidgettheme" itemid="29e701cd-bae7-4208-ac3d-6ff9df85a0ec">
<ul>
<li>
<label class="desc" for="field1">Requestor
<span class="req">*</span>
</label>
<div>
<input data-fieldid='fca9f195-2919-473d-b635-3dc6aaf125ff' id="field1" type="text" tabindex="1" maxlength="255" value="" class="field text large" name="field1" />
</div>
</li>
<li>
<label class="desc" for="field2">PPM# or SNOW INC#
<span class="req">*</span>
</label>
<div>
<input data-fieldid='339fadc9-84b7-4f87-b015-27726c5f82e8' id="field2" type="text" tabindex="2" maxlength="255" value="" class="field text large" name="field2" />
</div>
</li>
<li>
<label class="desc" for="field3">Salesforce Org</label>
<div>
<select data-fieldid='75b8d473-8e65-4970-b744-85c3d59d4fe8' tabindex="3" class="field select medium" name="field3" id="field3" >
<option value="Select One">Select One</option>
<option value="JH Org">JH Org</option>
<option value="Insurance">Insurance</option>
<option value="Investments">Investments</option>
</select>
</div>
</li>
<li>
<label class="desc" for="field4">Region</label>
<div>
<select data-fieldid='9a2d66c4-9851-4e92-a7f8-10c1edc0f7f6' tabindex="4" class="field select medium" name="field4" id="field4" >
<option value="Select One">Select One</option>
<option value="PFSDev">PFSDev</option>
<option value="C1Dev">C1Dev</option>
<option value="CEDev">CEDev</option>
<option value="CEDev2">CEDev2</option>
<option value="NBRDev">NBRDev</option>
<option value="INVDev">INVDev</option>
<option value="Dev">Dev</option>
<option value="C1QA">C1QA</option>
<option value="C1QA2">C1QA2</option>
<option value="QA">QA</option>
<option value="Production">Production</option>
</select>
</div>
</li>
<li>
<label class="desc" for="field5">Rationale for the request
<span class="req">*</span>
</label>
<div>
<textarea data-fieldid='54012841-e9c8-46b6-a05a-0a03b0af6697' id="field5" tabindex="5" class="field textarea" rows="5" spellcheck="true" name="field5"></textarea>
</div>
</li>
<li>
<label class="desc" for="field6">Start Date/Time
<span class="req">*</span>
</label>
<div>
<input data-fieldid='c5e8c4c6-75c5-490f-a4f8-f2d8c9578d2e' id="field6" class="field large datetime" name="field6" type="text" value=""/>
</div>
</li>
<li>
<label class="desc" for="field7">End Date/Time
<span class="req">*</span>
</label>
<div>
<input data-fieldid='4076f2b7-efa4-4a48-b006-969172238629' id="field7" class="field large datetime" name="field7" type="text" value=""/>
</div>
</li>
<li itemid="20d69d90-5872-4c45-a432-b918b03b2aff">
<input type="button" value="Submit">
</input>
</li>
</ul>
<span class="error-message"></span>
<span class="success-message"></span>
</form>
<div style='display:none;' itemid='29e701cd-bae7-4208-ac3d-6ff9df85a0ecLoading'>
</div>
<div style='display:none;' itemid='29e701cd-bae7-4208-ac3d-6ff9df85a0ecError'>
<li>
<div>
<h3 style='text-align:center'>Error</h3><p>We're unable to retrieve your data due to an error.</p> </div>
</li>
</div>
<div style='display:none;' itemid='29e701cd-bae7-4208-ac3d-6ff9df85a0ecAcknowledgement'>
</div>
</div>
<div id="footer">
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery('li[itemid="20d69d90-5872-4c45-a432-b918b03b2aff"]').click(function() {
picassoRuntime.SubmitFormWithValidation('29e701cd-bae7-4208-ac3d-6ff9df85a0ec', this);
});
handleInput = function(event) {
var elem = event.target ? event.target : this;
var $li = $(elem).closest('li');
var $lis = $li.closest('form').find('li');
$lis.removeClass('focused');
$li.addClass('focused');
}
initializeForm = function() {
var $form = $('form.FormWidgettheme');
if ($form.length > 0) {
$form.find('.field.text').change(handleInput).focus(handleInput).keyup(handleInput);
$form.find('.field.textarea').change(handleInput).focus(handleInput).keyup(handleInput);
$form.find('.field.checkbox').change(handleInput);
$form.find('.field.select').click(handleInput).keyup(handleInput);
}
}();
FormHandler = function(itemId) {
var $form = $('form[itemid="' + itemId + '"]');
this.onError = function(error) {
this.enableSubmit();
if (error.MESSAGE) {
this.show('.error-message', error.MESSAGE);
}
}
this.onSuccess = function(success) {
this.enableSubmit();
if (success.MESSAGE) {
this.show('.success-message', success.MESSAGE);
}
}
this.onSubmit = function() {
this.disableSubmit();
this.hide('.error-message');
this.hide('.success-message');
}
this.disableSubmit = function() {
var $submit = $form.find('input[type="button"]');
$submit.attr('disabled', 'disabled');
}
this.enableSubmit = function() {
var $submit = $form.find('input[type="button"]');
$submit.attr('disabled', '');
}
this.setForm = function($forminst) {
$form = $forminst;
}
this.validate = function() {
var requiredMarkers = $form.find('.req');
// keep this context for the callback function to use
var me = this;
// need to store a flag since returning false from the callback just breaks the loop
var passed = true;
$(requiredMarkers).each(
function() {
// the parent of this span is a label, check the 'for' attribute and then retrieve the field with the ID!
var field = $('#' + $(this).parent().attr("for"));
var value = $(field).val();
if (!value || $.trim(value) == "") {
$(field).focus();
me.show('.error-message', 'Complete all of the required fields before saving your changes.');
passed = false;
// returning false breaks the .each loop
return false;
}
}
);
return passed;
}
this.show = function(where, message) {
var $message = $form.find(where);
$message.text(message);
$message.show();
}
this.hide = function(where) {
var $message = $form.find(where);
$message.hide();
}
}
if (typeof formHandlers == 'undefined') {
formHandlers = {};
}
formHandlers['29e701cd-bae7-4208-ac3d-6ff9df85a0ec'] = new FormHandler('29e701cd-bae7-4208-ac3d-6ff9df85a0ec');
});
</script>
</body>
</html>
For making the fields required you can refer my example, you need to set the class for all required input to jq_req and call "return validateReglementFields()" on onclick of Save/Submit button.
I am afraid if we could achieve dependent picklist feature on Site.com but we can do it on force.com sites.
Hope it helps.