Enable the client side validations using episerver.forms

Vote:
 

Hello,

Anyone knows how can I enable the client side validations using episerver.forms?

Thanks in advance,

Rita

#147594
Apr 19, 2016 16:16
Vote:
 

Hi

Make sure you have @Html.RequiredClientResources("Footer") in your root cshtml file. Should be included right before body closing tag.

/Oskar

#147595
Apr 19, 2016 16:20
Vote:
 

Hi Oskar,

I already included that in my _layout.cshtml page right before </body> tag and my form is being submited and i just got the error messages from the server.

Do you have any idea if I need to do something more?

Thanks,

Rita

#147597
Apr 19, 2016 16:56
Vote:
 

Check the console in your browser to see if there are any js-errors.

#147598
Apr 19, 2016 17:00
Vote:
 

Yes you are right I have an error in 

/EPiServer.Forms/DataSubmit/GetFormInitScript?formGuid=c0fc1896-bd1d-41df-8b70-1824ebb35461&formLanguage=en

epi is not defined in the bold line bellow!!!


/* This view acts as a rendering template to render InitScript(and server-side Form's descriptor) in FormContainerBlock's client-side for Form[c0fc1896-bd1d-41df-8b70-1824ebb35461].
TECHNOTE: all serverside (paths, dynamic values) of EPiServerForms will be transfered to client side here in this section. */
(function initializeOnRenderingFormDescriptor() {
// each workingFormInfo is store inside epi.EPiServer.Forms, lookup by its FormGuid
var workingFormInfo = epi.EPiServer.Forms["c0fc1896-bd1d-41df-8b70-1824ebb35461"] = {
Id: "c0fc1896-bd1d-41df-8b70-1824ebb35461",
Name: "Job Application",
// whether this Form can be submitted which relates to the visitor's data (cookie, identity) and Form's settings (AllowAnonymous, AllowXXX)
SubmittableStatus : {"submittable":true,"message":""},
ConfirmMessage : "Your data was submitted",
ShowNavigationBar : true,
ShowSummarizedData : true,

// Validation info, for executing validating on client side
ValidationInfo : [{"targetElementName":"__field_116","targetElementId":"4744cbbc-4373-4cb0-93c1-2199b98b1219","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}},{"type":"EPiServer.Forms.Implementation.Validation.DateDDMMYYYYValidator","description":null,"model":{"jsPattern":"^(((0[1-9]|[12]\\d|3[01])\\/(0[13578]|1[02])\\/((19|20)\\d{2}))|((0[1-9]|[12]\\d|30)\\/(0[13456789]|1[012])\\/((19|20)\\d{2}))|((0[1-9]|1\\d|2[0-8])\\/02\\/((19|20)\\d{2}))|(29\\/02\\/(19|20)([02468][048]|[13579][26])))$","dotNetPattern":"^(((0[1-9]|[12]\\d|3[01])\\/(0[13578]|1[02])\\/((19|20)\\d{2}))|((0[1-9]|[12]\\d|30)\\/(0[13456789]|1[012])\\/((19|20)\\d{2}))|((0[1-9]|1\\d|2[0-8])\\/02\\/((19|20)\\d{2}))|(29\\/02\\/(19|20)([02468][048]|[13579][26])))$","message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.DateDDMMYYYYValidator/message' for 'Dutch']","validationCssClass":null,"additionalAttributes":null}}]},{"targetElementName":"__field_127","targetElementId":"7ea06714-b1ab-4e1b-bd35-fee0b210c4cd","validators":[{"type":"Frontend.Business.Validators.ZipCodeValidator","description":null,"model":{"jsPattern":"^[1-9][0-9]{3}\\s?$","dotNetPattern":"^[1-9][0-9]{3}\\s?$","message":"This is not a valid zipcode","validationCssClass":null,"additionalAttributes":null}},{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_162","targetElementId":"0e80db1a-5d6f-428c-bec7-996ea3f05bb2","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_123","targetElementId":"52b5d1b8-e07c-4358-87e3-195e5ef7c222","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_120","targetElementId":"33862116-8ca2-4ec9-af31-e5da6566ece0","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_122","targetElementId":"7f07bdcc-a070-4f7a-80a1-e7e63670e4b0","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_126","targetElementId":"83e83752-3541-4598-bdbf-37eaf606f750","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}},{"type":"EPiServer.Forms.Implementation.Validation.PositiveIntegerValidator","description":null,"model":{"jsPattern":"^\\d+$","dotNetPattern":"^\\d+$","message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.PositiveIntegerValidator/message' for 'Dutch']","validationCssClass":null,"additionalAttributes":null}}]},{"targetElementName":"__field_163","targetElementId":"25640a7f-9cc3-4ae4-8234-4473b6308bce","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_119","targetElementId":"ae5df218-2db1-4341-9dbb-a96b1fd8fee1","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}},{"type":"EPiServer.Forms.Implementation.Validation.EmailValidator","description":null,"model":{"jsPattern":"(^$)|(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$)","dotNetPattern":"(^$)|(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$)","message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.EmailValidator/message' for 'Dutch']","validationCssClass":null,"additionalAttributes":null}}]},{"targetElementName":"__field_124","targetElementId":"629258c0-cb9f-471f-954e-90f4db8c24d8","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_125","targetElementId":"ba1feff7-6def-444c-a455-58670dfec700","validators":[{"type":"EPiServer.Forms.Implementation.Validation.RequiredValidator","description":null,"model":{"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.RequiredValidator/message' for 'Dutch']","validationCssClass":"ValidationRequired","additionalAttributes":null}}]},{"targetElementName":"__field_135","targetElementId":"34b10e21-aa8a-4574-8e56-a37d45772548","validators":[{"type":"EPiServer.Forms.Implementation.Validation.AllowedExtensionsValidator","description":null,"model":{"accept":"","message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.AllowedExtensionsValidator/message' for 'Dutch']","validationCssClass":null,"additionalAttributes":null}},{"type":"EPiServer.Forms.Implementation.Validation.MaxFileSizeValidator","description":null,"model":{"sizeInBytes":4194304,"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.MaxFileSizeValidator/message' for 'Dutch']","validationCssClass":null,"additionalAttributes":null}}]},{"targetElementName":"__field_136","targetElementId":"3f7de98f-a5d3-4a95-9481-de03838de7cd","validators":[{"type":"EPiServer.Forms.Implementation.Validation.AllowedExtensionsValidator","description":null,"model":{"accept":"","message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.AllowedExtensionsValidator/message' for 'Dutch']","validationCssClass":null,"additionalAttributes":null}},{"type":"EPiServer.Forms.Implementation.Validation.MaxFileSizeValidator","description":null,"model":{"sizeInBytes":4194304,"message":"[Missing text '/episerver/forms/validators/EPiServer.Forms.Implementation.Validation.MaxFileSizeValidator/message' for 'Dutch']","validationCssClass":null,"additionalAttributes":null}}]}],
// Steps information for driving multiple-step Forms.
StepsInfo : {
Steps: [{"index":0,"attachedUrl":"","dependField":null,"dependCondition":null,"attachedContentLink":"","dependValue":"","code":"__field_","guid":"00000000-0000-0000-0000-000000000000","description":""}]
},
FieldsExcludedInSubmissionSummary: ["__field_135","__field_136"],
ElementsInfo: {"__field_165":{"type":"EPiServer.Forms.Implementation.Elements.ChoiceElementBlock","friendlyName":"Geslacht","customBinding":false},"__field_116":{"type":"EPiServer.Forms.Implementation.Elements.TextboxElementBlock","friendlyName":"Geboorteddatum","customBinding":false},"__field_127":{"type":"EPiServer.Forms.Implementation.Elements.NumberElementBlock","friendlyName":"Postcode","customBinding":false},"__field_162":{"type":"Frontend.Business.Forms.ConstrainedTextbox.Block.ConstrainedTextboxElementBlock","friendlyName":"Postcode2","customBinding":false},"__field_123":{"type":"EPiServer.Forms.Implementation.Elements.TextboxElementBlock","friendlyName":"Initialen / Voornaam","customBinding":false},"__field_120":{"type":"EPiServer.Forms.Implementation.Elements.TextboxElementBlock","friendlyName":"Adres","customBinding":false},"__field_122":{"type":"EPiServer.Forms.Implementation.Elements.TextboxElementBlock","friendlyName":"Achternaam","customBinding":false},"__field_126":{"type":"EPiServer.Forms.Implementation.Elements.NumberElementBlock","friendlyName":"Huisnummer / Toevoeging","customBinding":false},"__field_163":{"type":"Frontend.Business.Forms.ConstrainedTextbox.Block.ConstrainedTextboxElementBlock","friendlyName":"Toevoeging","customBinding":false},"__field_119":{"type":"EPiServer.Forms.Implementation.Elements.TextboxElementBlock","friendlyName":"E-mailadres","customBinding":false},"__field_124":{"type":"EPiServer.Forms.Implementation.Elements.TextboxElementBlock","friendlyName":"Plaats","customBinding":false},"__field_125":{"type":"EPiServer.Forms.Implementation.Elements.TextboxElementBlock","friendlyName":"Telefoonnummer","customBinding":false},"__field_135":{"type":"EPiServer.Forms.Implementation.Elements.FileUploadElementBlock","friendlyName":"Upload CV","customBinding":false},"__field_136":{"type":"EPiServer.Forms.Implementation.Elements.FileUploadElementBlock","friendlyName":"Upload Motivatiebrief","customBinding":false},"__field_134":{"type":"EPiServer.Forms.Implementation.Elements.SubmitButtonElementBlock","friendlyName":"Verzenden","customBinding":false}},
DataSubmitController: "/EPiServer.Forms/DataSubmit"
};

/// TECHNOTE: Calculation at FormInfo level, and these values will be static input for later processing.
workingFormInfo.StepsInfo.FormHasNoStep_VirtualStepCreated = true; // this FLAG will be true, if Editor does not put any FormStep. Engine will create a virtual step, with empty GUID
workingFormInfo.StepsInfo.FormHasNothing = false; // this FLAG will be true if FormContainer has no element at all
workingFormInfo.StepsInfo.AllStepsAreNotLinked = true; // this FLAG will be true, if all steps all have contentLink=="" (emptyString)
})();

#147599
Apr 19, 2016 17:11
Vote:
 

I defined now the the resource file EPiServer.Forms.xml and I didn't got any error anymore but I still can't see the client messages.

#147600
Apr 19, 2016 17:26
Vote:
 

In Forms.config, try setting injectFormOwnJQuery="true". You might need to restart the website after that.

#147601
Apr 19, 2016 17:29
Vote:
 

It didn't work.

#147602
Apr 19, 2016 17:38
Vote:
 

Maybe a stupid question but is @Html.RequiredClientResources("Header") included?

#147639
Apr 20, 2016 11:24
Vote:
 

yes :(

#147640
Apr 20, 2016 11:29
Vote:
 

What is happening is I see my form I insert all the data (some data is incorrect) and I click on the submit button.

After that I see an error message but is from the server (a post is being done)... and all the fields are empty again...

So the client side validations are not working. 

#147642
Apr 20, 2016 11:56
Vote:
 

Hi,

Forms has JS API (validation, navigation,  ...) enabled by default (and it is tested that it works, if you have a browser with JavaScript-enabled).

You might not setup your site properly for Client resources. Please read these 2 articles for official information

  • http://world.episerver.com/documentation/items/developers-guide/episerver-cms/7/client-resources/client-resource-management/
  • http://world.episerver.com/blogs/Per-Magne-Skuseth/Dates/2013/3/Is-your-site-Add-On-friendly/

Forms use exactly that guideline for registering its client resources.
AlloyMVC is a good reference for developing your template. We always test Forms with AlloyMVC before releasing.

Without detail information, I cannot troubleshoot or give correct hint. Could you please, test Forms with AlloyMVC? If it still works, please compare your difference with AlloyMVC templates.

Please raise a SupportCase, so we can have more information, to help you better.

PS: 

  • the resource file EPiServer.Forms.xml is provided for sample only (and to modify, translate to other language if you want). If you want to change it, please put your modified-files into your localization's folder. See this article. For AlloyMVC, it is 

    virtualPath="~/Resources/LanguageFiles"

    I don't thing it related to your issue.

#148162
Edited, May 05, 2016 5:15
Vote:
 
<p>Im receiving an error with the javascript for validation. I have followed this thread and I have made no progress. Here's the error:&nbsp;</p> <p>http://domain:17000/EPiServer.Forms/DataSubmit/GetFormInitScript?formGuid=a0000aa0-b11b-22c2-3333-4e44ee44e444&amp;formLanguage=en</p> <p>500 (Internal Server Error)</p> <p>What am I doing wrong?&nbsp;</p>
#151414
Jul 20, 2016 20:20
Vote:
 

@David: please give us the detail exception error message. "500 (Internal Server Error)" does not help us to troubleshoot it.

You should start your own thread as well so we can answer/research/track the problem easily. Thank you.

#151616
Edited, Aug 01, 2016 6:26
Vote:
 
<p>Im having simular problems with AtHeader not being populated, please help</p> <p>http://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2016/8/quotreferenceerror-epi-is-not-definedquot-atheader-not-working-episerver-forms/</p>
#152195
Aug 19, 2016 9:14