Adding custom script for client side validation in SXA

Question

I am using Sitecore 9.0.2 with SXA 1.7.1

I have added the below javascript for client-side validation in SXALayout.cshtml page:

Unfortunately, I am getting XA is not defined error:

It's against best practices to modify the layout included with SXA. There is probably a different way to do this. — Michael West, Commented Oct 24, 2018 at 1:27
If this is related to Sitecore Forms then you shouldn't touch SXALayout view. You are probably following article from Jason here -> citizensitecore.com/2017/12/13/… . Mind that it was created for different version of SXA where Ajax was not supported and this small "hack" was made as a quick fix for that problem. — Peter Procházka, Commented Oct 24, 2018 at 5:29
I would follow articles similar to this one c-sharpcorner.com/article/asp-net-mvc5-jquery-form-validator and create jquery validation on existing field in your separate js file. Add that file into your theme in SXA and make sure it's loaded as last one. Should do the trick without fiddling around OOTB files which is bad practice and you should avoid it. — Peter Procházka, Commented Oct 24, 2018 at 5:40

Peter Procházka · Accepted Answer · 2018-10-24 06:38:47Z

You shouldn't change views which come OOTB unless it is really necessary.

I would recommend creating js file with your custom scripts and adding that file into your theme in SXA. Make sure it's loaded as last one.

Location of file would be /sitecore/media library/Themes/{theme_name}/scripts/

e.g. /sitecore/media library/Themes/Wireframe/scripts/

if you are using Wireframe theme.

1 Answer 1