Reactive Web form validation with form inside web block

We are trying to create a web block 'FormPopup' (for use in a popup) that contains a form and two form buttons (save and cancel) and a placeholder 'ContentPlaceholder' for the fields.

The 'FormPopup' web block structure looks like this:

Clients of the web block can place fields inside the placeholder to place fields in the form.

That looks like this:

When the user clicks the save-button in the 'FormPopup' web block the following happens:

1) An OnFormValidation Event is triggered by the web block containing the form.
    ->  this event then gets handled by the 'CustomFormPopup' that validates its fields (that were placed in the ContentPlaceholder)

2) The PopupForm.Valid property is checked.  If True, the OnValidFormSaved event gets triggered.
   -> this event gets handled by the 'CustomFormPopup' that can then process the form data

The problem we face is that when in step 1) the CustomFormPopup validates its fields and sets the Valid property to false on one of the fields, then that doesn't set the PopupForm.Valid to False.  This means that the check in 2) will succeed, as PopupForm.Valid is still True, even though some of the fields in the form are invalid.

How can this be solved?

.oml file attached to try this out.


Hi Steven,

I guess the mechanism / relationship between inputs and the form they are on is lost when working across webblocks.

I found a workaround, and it works, i think (some quick testing worked for me).  I don't really get what exactly you're trying to do with webblocks inside webblocks on popups, but you'll have your reasons ;-)

So, maybe this is a solution for you, or maybe you need to simplify your setup, but this is what I've done :

I add input from the outer webblock to the inner to indicate if validations failed or not, and I add input from the outer to the inner webblock that changes on each validation, forcing the inner webblock to refresh (including a refresh of stuff inside it's placeholders)


add 2 input parameters to the FormPopup, one boolean IsValid, that will tell if the parent webblock validations are oke, and the other, called ValidationIteration, is an integer counter, but you could use anything you like for this, as long as it changes on every executed validation.

add the same 2 as local variables to CustomFormPopup, and map them to the inputs of the inner webblock.

put the ValidationIteration input parameter on the FormPopup screen as an expression, and set the expression style to display:none

Inside the validation event handler of CustomFormPopup, start by resetting validation results (make all input.valid true, make local variable IsValid true, augment local variable to count iterations)

In each assign for a non valid input, add an extra assignment to set the IsValid local variable to False

Extend the Form.IsValid IF to also take into account the IsValid input parameter.

Hope this helps you,


see attached your oml revised



Hello Steven,

I have an alternative also, but I would like to understand other things.

1. How will you handle the input data in different places?
You have inputs in the FORM block and in the outer block that USES the FORM block.
Are they saved at the same time or are they "independent"? This will impact how you can handle things.

I will assume for my example that you want to save everything at the same time, but without having to pass information from the FORM block to the PARENT block.

Dorine's work is nice, but I think there is still a problem. If you set the input valid to true at the beginning of the handler, when you have inputs that are mandatory but do not have customized validation will fail.

I did some changes that may solve the problem, but the truth is that this approach of yours still put a lot of responsibility on the developer that will add the inputs, probably creating more work for him than creating the entire forms each time, becoming more error prone. So, while I understand why you want to use it, I don't recommend this approach because I don't think the goal will be reached.

The changes I did were:

1, Add two Input Parameters to the Form block. The Toggle input parameter will be used only to trigger the OnParametersChanged event, and the CanSave to tell if the User's validation is ok. In the parent block, I add a boolean variable (CanSaveData and Toggle) and I am passing it to the FORM block, with False as its default value.

2. I moved the "this is ok to save" part of the Save button handler to the OnParametersChanged action, taking care to check, in the beginning, if everything is ok (if it is not, I reset the CanSave input):

3. In the Handler of the OnFormValidationTrigger event. The biggest problem here is that I can't really set all inputs to true at the beginning, so, after the customised validation, if it passes, I need to set it to true (eventually), as in the past it could have been set to false. In the end, I set the CanSaveData to the value of IsValid, based on all user inputs valid and the Toggle to not Toggle, that will trigger the OnParametersChanged of the FORM block.
All the code at step 3 will be strongly dependent on each case and will be difficult to establish a pattern to make the life of the developer easier.
This action is what makes me think this approach is not really good.

But it works.


Hi Dorine and Eduardo,

First of all thanks for all the effort in trying to solve my problem.

I must say that I find the solutions quite inventive.

Dorine's solution seems to solve most of my problems.  Eduardo's toggle-alternative for the ValidationIteration is a little nicer.  But as far as I can tell both solutions still have the issue of not running the 'mandatory' validations on the fields in the 'parent' web block (the one not containing the form: 'CustomFormPopup').

I tried adding another input field in the parent web block (CustomFormPopup) that is mandatory but has no custom validations, and this is not validated, even in Eduardo's solution.

@Eduardo: So you correctly pointed out that the mandatory fields in the parent are not validated in Dorine's solution, but they also don't seem to be validated in your solution.

As Eduardo pointed out, it might be better leaving this approach altogether and keep the form and its fields in the same web block, as it becomes complex for the developer to use this pattern and not forget to do the mandatory checks himself.

As to the reason I want to do this in the first place (putting the form in another web block than the fields): I want to create a popup like this:

You can see that the input fields are in the center (content) container and the buttons are in the footer container.

As the input fields and the save button should both be part of the form this means that the content and footer containers need to both be part of the form.

To get the above layout requires applying some specific css classes we created (for positioning and scrollbar). We want to re-use this popup layout for many different popups containing forms, so that's why we want to create a reusable web block for this popup.  The reusable web block contains the three containers (header, content and footer).  And because we want the fields in the content container and the buttons in the footer container to be in the same form, this means the form needs to be part of the reusable web block.

By now I've come up with another possible solution for our problem, putting the complete form in the content part of the popup, and including a hidden save-button in the form that is triggered by the save-button in the footer using javascript.

Hitting the enter-key in the form will trigger the hidden save-button.  The user himself can click the save button in the footer, which will in turn call .click() on the hidden save-button in the form.

I attached the .oml file with this solution.  It includes the css to get the popup with the scrollbar.




The other solutions do not implement "automatic validation", and automatic validation is not triggered because the inputs are not "in" the form. You need to implement it yourself (test datatype and mandatory, in the parent. So, it is not a good approach :)

I still think that it is too much work. Avoiding trying to do generic things and implement the form when needed is easier, less error-prone and easier to maintain... 

Said that hidden buttons in web blocks to force to save the data in inner forms (and validated it) is a usual solution, but I still think too complicated for most scenarios...


I came across ur post for the similar problem I had and just realized the solution was much simpler. By just switching the Built-in Validations to Yes for the footer button would validate all the controls, even if the button is outside the form.

Hello I found this component in the forge it may help!

Hi Diego,

Funny you mention that Forge component as I created it myself a while ago to help others solve this particular issue.  The component basically showcases the validation pattern we ended up using in our project.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.