+ Start a Discussion
Jennifer W. LeeJennifer W. Lee 

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 
LakshmanLakshman
A sample page to achieve required field validation using Jquery is as below:
<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 ?
Jennifer W. LeeJennifer W. Lee
I have to admit, I'm not sure where I'm supposed to tweak for what you pasted.

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&amp;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">
&nbsp; </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">
&nbsp; </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">
&nbsp; </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>
LakshmanLakshman
You need to store the dependent information somewhere in custom settings as hardcoding this in the logic is not best practise. To know how to create dependent picklist using custom settings, please refere this link - https://developer.salesforce.com/docs/atlas.en-us.200.0.apexcode.meta/apexcode/apex_methods_system_custom_settings.htm#apex_methods_system_custom_settings 

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.
Jennifer W. LeeJennifer W. Lee
The form is within the community built using Site.com. It is pulling in the picklist information from Salesforce. I'm not hardcoding anything in this form. I'm not a developer so if simulating the dependent picklist requires much coding, then I don't need it. It was more of a nice to have.
LakshmanLakshman
You can make the field required in the field properties, see screenshot below:
User-added image
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.