Try our conversational search powered by Generative AI!

e is not defined for custom form element on submit

Vote:
 

Hi,

I'm trying to implement a custom date element for EPiSErver forms similar to the example n EPiServer.Forms.Samples just without the time options.

The only problem is that it all seems to work until I sumbit the form.  At that point nothing happens because there is an error in the javascript loaded via webresource.axd, e is not defined.

What would the forms javascript be looking for that could cause this as there doesn't seem to be anyway to find out what is going on and as far as I can tell I have done everything the example shows that I need too.

Thanks,

Phil

#188677
Mar 01, 2018 2:31
Vote:
 

Could you add this line into your web.config

<clientResources debug="true" />

It will make Forms load un-minified EPiServerForms.js so you can debug to see what the error is. You need to have css classes [Form__Element Form__CustomElement] or data attribute [data-epiforms-element-name] in your element markup file. And also you need override the method getCustomElementValue to return your custom element value.

Hope this help

#188686
Mar 01, 2018 7:45
Vote:
 

Thanks that helps it's actually the validatorActor that is the problem, it's not set (i.e. null).  I'm not sure where the validatorActor comes from but there should probably be a validation check of some sort in the JS if it is required.

 function validateFormValue(fieldName, fieldValue, validators) {
                var results = [];

                $(validators).each(function (index, item) {

                    // take the Actor, it can be function to execute, or contain property (of type function) "validate"
                    var validatorActor = epi.EPiServer.Forms.Validators[item.type];
                    var validatorFunc = null;

                    if (typeof validatorActor === "function") {
                        validatorFunc = validatorActor;
                    } else if (typeof validatorActor["validate"] === "function") {
                        validatorFunc = validatorActor["validate"];
                    }

                    // execute the validatorFunc
                    if (validatorFunc) {
                        var itemResult = validatorFunc(fieldName, fieldValue, item);
                        $.extend(itemResult, { fieldName: fieldName, fieldValue: fieldValue });
                        results.push(itemResult);
                    }
                });

                return results;
            }
#188746
Edited, Mar 02, 2018 4:29
Vote:
 

You need extend epi.EPiServer.Forms.Validator to add your own for the element. Please see the EPiServerFormsSample.js (line 127)

// extend the EpiForm JavaScript API in ViewMode
$.extend(true, epi.EPiServer.Forms, {
    /// extend the Validator to validate Visitor's value in Clientside.
    /// Serverside's Fullname of the Validator instance is used as object key (Case-sensitve) to lookup the Clientside validate function.        
    Validators: {
        "EPiServer.Forms.Samples.Implementation.Validation.AddressValidator": addressesValidate,
        "EPiServer.Forms.Samples.Implementation.Validation.DateTimeRangeValidator": dateTimeRangeValidate,
        "EPiServer.Forms.Samples.Implementation.Validation.DateTimeValidator": dateTimeValidate,
        "EPiServer.Forms.Samples.Implementation.Validation.DateValidator": dateTimeValidate,
        "EPiServer.Forms.Samples.Implementation.Validation.TimeValidator": dateTimeValidate,
        "EPiServer.Forms.Samples.Implementation.Validation.RecaptchaValidator": function (fieldName, fieldValue, validatorMetaData) {
            // validate recaptcha element
            if (fieldValue) {
                return { isValid: true };
            }

            return { isValid: false, message: validatorMetaData.model.message };
        }
    },
......
#188747
Mar 02, 2018 4:35
Vote:
 

Yeah that worked thanks.  This really needs to be included in the documentation for EPiServer Forms.

Also how does the loading of scripts for EPiServer Forms work with the current implementation for EPiServer (EPiServer.Framework.Web.Resources.ClientResources).  If  EPiSErver Forms works differently this is going to be really annoying.  I would have expected that it would use the existing client resource framework but it doesn't seem to use this.

#188801
Mar 05, 2018 1:32
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.