The Entity Form record contains a field named "Custom JavaScript" that can be used to store JavaScript code to allow you to extend or modify the form's visual display or function.

 

The custom block of JavaScript will added to the bottom of the page just before the closing form tag element.

Form Fields

The HTML input id of an entity field is set to the logical name of the attribute. This makes selecting a field, setting values, or other client side manipulation easy with jQuery.

$(document).ready(function() {
   $("#address1_stateorprovince").val("Saskatchewan");
});

Additional Client Side Field Validation

Sometimes you may need to customize the validation of fields on the form. The following example demonstrates adding a custom validator. This particular example forces the user to specify an email only if the another field for preferred method of contact is set to 'Email'.

if (window.jQuery) {
(function ($) {
if (typeof (Page_Validators) == 'undefined') return;
// Create new validator
var newValidator = document.createElement('span');
newValidator.style.display = "none";
newValidator.id = "emailaddress1Validator";
newValidator.controltovalidate = "emailaddress1";
newValidator.errormessage = "Email is a required field.";
newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
newValidator.initialvalue = "";
newValidator.evaluationfunction = function () {
var contactMethod = $("#preferredcontactmethodcode").val();
if (contactMethod != 2) return true; // check if contact method is not 'Email'.
// only require email address if preferred contact method is email.
var value = $("#emailaddress1").val();
if (value == null || value == "") {
return false;
} else {
return true;
}
};

// Add the new validator to the page validators array:
Page_Validators.push(newValidator);

// Wire-up the click event handler of the validation summary link
$(document).ready(function () {
$("a[href='#emailaddress1_label']").on("click", function () { scrollToAndFocus('emailaddress1_label','emailaddress1'); });
});
}(window.jQuery));
}

General Validation

On click of the submit button a function named entityFormClientValidate is executed. You can extend this method to add custom validation logic.

if (window.jQuery) {
(function ($) {
if (typeof (entityFormClientValidate) != 'undefined') {
var originalValidationFunction = entityFormClientValidate;
if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
entityFormClientValidate = function() {
originalValidationFunction.apply(this, arguments);
// do your custom validation here
// return false; // to prevent the form submit you need to return false
// end custom validation.
return true;
};
}
}
}(window.jQuery));
}

Show/Hide Section

$(".section[data-name='tab_3_section_2']").closest("fieldset").hide();

$(".section[data-name='tab_3_section_2']").closest("fieldset").show();

Show/Hide Tab

$(".tab[data-name='tab_2']").hide();
$(".tab[data-name='tab_2']").prev().hide(); // hides the tab's title if one is present

$(".tab[data-name='tab_2']").show();
$(".tab[data-name='tab_2']").prev().show(); // show the tab's title if one is present