Episerver form, custom javascript prevent submit

RexEspinosa

Vote:

Hi,

I have an Episerver form that requires custom validation which performs business rule checks across multiple fields. For this reason, a custom validator for a single field won't work. I can execute custom javascript validation and prevent submit of the form by doing the following to bind to the onclick of the submit button. This prevents the form from submitting if my custom validation rules do not pass.

if (typeof $$epiforms !== 'undefined') {
    $(".FormSubmitButton").on("click", function (e) {
        e.preventDefault();

        if (!checkCustomValidationRules()) {
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    });
}

This works. However, one drawback to this is that the standard Epi form validation doesn't execute until after the custom validation has succeeded. It would be ideal if both the custom validation and the Epi form validation executed at the same time so you can see the errors for both.

I can hook into the form events (http://world.episerver.com/documentation/developer-guides/forms/handling-events-for-forms/) however, it doesn't look like I can prevent the form from submitting (notification-only events).

Is there are recommended way to do this?

Thanks,

Rex

#177527

Apr 13, 2017 21:30

aakash - Jul 22, 2023 11:36

How you have added this javascript code in your form?
For the last 1 month, I am finding out how we can add javascript to the Episerver form but have not found any solution so can you please help me?

Dac Thach Nguyen

Vote:

You can create custom elements and custom validator where you can execute your javascript validation along with default one. Please take a look at our sample elements at https://github.com/episerver/EPiServer.Forms.Samples the Address or DateTime element might give you a hint.

Hop this help

#177626

Apr 14, 2017 12:34

Grzegorz Jeremias

Vote:

Hi,

Is there any way to prevent submit without creating custom validator?

We need some way to prevent submitting under some special conditions, custom validator is not the solution in this case, so we would like to be able somehow to prevent submission (it might be in formsStepValidating event), how to achieve that? Is there any kind of flag or similar which we might set to tell the form to not do submit?

#187654

Jan 30, 2018 23:45

Dac Thach Nguyen

Vote:

Unfortunately, there is no kind of flag that cancel form submitting. But I think custome validator can work for most of case, can you explain why it is not the solution for you?

#187655

Jan 31, 2018 5:01

Grzegorz Jeremias

Vote:

Well we have created our own form elements by inheriting from default (e.g. TextboxElementBlock, SelectionElementBlock etc) and we are using Parsley library for client validations. So we are validating all the elements on form (pretty much data attributes based logic), not just single element.

Another thing is that we have added kind of spam protection logic to the whole form itselt (not related to single element but to whole form) so that kind of security check we also want to do globally on the top of form not on particular element.

Do you think the solution mentioned in the question (binding to submit button click) could work? then we might do our validation there + spam protection check and totally stop submitting.

Btw when doing custom validator, does it always require C# class? even when we need just frontend validation there? it seems that registering new validator requires full name of classs.

And one more thing, we had a requirement that for file upload customer wants to have link which will do Remove files action, we have implemented that with Javascript by just clearing the input value, but it seems epiforms still keeps the information that it has file somewhere since when we marked that element to required and then cleared the field it still allowed to submit form even thought the file upload was empty and submitted empty value (it should stop submission when element required and no file there)

#187657

Jan 31, 2018 8:42

Dac Thach Nguyen

Vote:

The solution of binding to submit button click will work. But you need to run your spam protection logic FIRST before executing default handler (which contains fields validation logic).
Yes, register new validator required C# class for validating your data on server side. You need return true in Validate method if you don't have C# validation logic.
You need something like _hack_clearFileInput method in EPiServerForms.js to fully clear FileUpload element. Please refer to the method _resetFormValues to see how to clear FileUpload elements.

#187658

Jan 31, 2018 9:11

Grzegorz Jeremias

Vote:

According to your answers:

great will try that
yep I thought so
I actually was checking yesterday the _hack_clearFileInput but comment was saying " /// HACK: THIS IS FOR IE only: " so I assumed it is not solution for me (I noticed that behaviour in Firefox)

#187659

Jan 31, 2018 9:14

Grzegorz Jeremias

Vote:

Hi Dac,

Now after we have upgraded Episerver.Forms to version 4.18 (before 4.6) the prevention of form submitting stopped to work.

We are using

$('.FormSubmitButton').on('click', function (e) {

e.preventDefault();

// here our custom validations, if fails then
e.stopPropagation();
e.stopImmediatePropagation();

.......

)}

Even when we do that default Epi on click event is triggered, propagation is not stopped, form is submitted even when it is not valid!

We have tried already multiple ways how prevent propagating that event, but no luck. What has been changed that we cannot prevent submission when we want?

We were considering also switch to

workInNonJSMode

but then Dependencies would stop working which we need.

#199708

Dec 07, 2018 7:38

Grzegorz Jeremias

Vote:

latest finding - it is not even related to upgrade - it seems to work badly even before.
Important to mention that we have custom elements with custom views - meaning that default epi validation is not even handling these.
But simply if we want to prevent submit, we are calling e.stopPropagation(); but id does not work, why?
Rex in your case it really worked?

#199710

Dec 07, 2018 10:14

Try our conversational search powered by Generative AI!

Episerver form, custom javascript prevent submit