Nibble

Contour, adding custom validation without using code first

Just a quick post to share the answer to a question I got on the forum.

So as you can see in the code first examples, creating Contour forms code first also allows for an easy way to add extra (custom validation) http://www.nibble.be/?p=205

But there is also a way to add custom rules when you are designing the form in the UI.

There is an event you can hook into to add validation errors, a typical case for this would be a password and repeast password field where you need to make sure the input is the same.

image

So in the form designer these are just 2 password fields with no link

image

And to add the extra validation rules

    public class ContourValidation : ApplicationEventHandler
    {
        protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            FormRenderController.FormValidate += FormRenderController_FormValidate;
        }
 
        void FormRenderController_FormValidate(object sender, Umbraco.Forms.Mvc.FormViewEventArgs e)
        {
            if (e.Form.Name == "FormWithExtraValidation")
            {
                var s = sender as Controller;
                if (s != null)
                {
                    var pwf = e.Form.AllFields.SingleOrDefault(f => f.Caption == "Password").Id.ToString();
                    var rpwf = e.Form.AllFields.SingleOrDefault(f => f.Caption == "Repeat password").Id.ToString();
 
                    var password = e.Context.Request[pwf];
                    var repeatpassword = e.Context.Request[rpwf];
 
                    if(password != repeatpassword)
                        s.ModelState.AddModelError(rpwf, "passwords don’t match");
                    
                }
            }
        }
    }

So hook into the FormValidate event of the FormRenderController that will fire when a form validates

You can then add extra model errors to the modelstate

16 Comments so far

  1. Ismail Mayat on April 16th, 2014

    Tim,

    That is awesome i did not know you could hook into events like that. Are there any other events that can be hooked into?

    Ismail

  2. Søren Reinke on July 10th, 2014

    Hi Tim

    How well does Contour work with Umbraco 7.2 ?

  3. Gordon on January 19th, 2015

    I can’t get this to work with Umbraco Forms in Umbraco 7 … FormRenderController not found?!

  4. More Magic on February 10th, 2015

    @detikmarket, it’s not just you.
    It buggered me, so I tweaked it myself with the Stylish plugin.

    Tim, I suggest you adjust your css, to something like this:
    .csharpcode { padding: 5px; box-sizing: border-box; }
    .csharpcode pre { word-wrap: break-word; }

  5. Steve on October 26th, 2015

    Hi Tim,
    Where is the controller file for Forms? I can seem to find the file and searching for terms in your code above such as ContourValidation (or FormsValidation) returned nothing. Thanks - Steve

  6. Tim Geyssens on October 26th, 2015

    @Steve It’s at Umbraco.Forms.Web.Controllers.UmbracoFormsController

  7. Steve on October 26th, 2015

    @Tim, Thanks. Sorry, I should have asked where to place the code for the extra validation rules (eg the final listing above)? Is this Contour specific? I found validation code in umbracoforms.js in Forms / umbraco 7 and have had success just in the past 10 mins adapting it to perform some custom validation. Is this the right place to do that in Forms? Thanks a lot - you’re saving the day for me here! /Steve

  8. Steve on October 27th, 2015

    @Tim, any recommendations for using server side validation code (eg your code above) and/or js such as in the umbracoforms.js file? In the past it as recommended to put server side code in place to handle clients which didn’t support javascript or had it turn off. However, it also seems like it would be efficient to consolidate all custom validation if possible. What do you think?

  9. Tim Geyssens on October 27th, 2015

    @Steve this example is server side you can just add it the a .cs file and then drop it in the App_Code folder

  10. Steve on October 27th, 2015

    Yes, it is a great example and works really well. Just wondering about your thoughts on mixing server side and client side validation code - is it a good practice to have some of both or choose and consolidate rules, etc. I was thinking you could make a custom field type with two textboxes and put all the validation in umbracoforms.js

  11. Tim Geyssens on October 27th, 2015

    yeah a fieldtype with 2 inputs is a bit harder since you want them to also have a separate label, so doing it that way kinda feels like a hack, but it is possible to add client side validation to a fieldtype so will implement that

  12. Simon on December 31st, 2015

    Hi,

    Can anyone help me out figuring out this? I am implementing the validation and it is working; form is not being submitted. But validation error messages are not being shown. I have coded it the same the examples shows.

    What is the reason, please?

  13. Brian Lacy on January 16th, 2017

    @Gordon I couldn’t figure this out either… It appears that `FormRenderController` has changed to `UmbracoFormsController` since the switch to Umbraco Forms.

  14. Eric on December 10th, 2018

    Question, how would you do this to validate a field on the last page of a multi-step form? I have a reCAPTCHA field at the end of my form, and it’s currently getting hit because it’s part of the AllFields list which is checked when FormValidate is called at every “Next” step of the form.

  15. Eric on December 10th, 2018

    Whoops nevermind,

    var currentFormStep = 0;
    int.TryParse(HttpContext.Current.Request[”FormStep”], out currentFormStep);

    var s = sender as Controller;

    if (s != null)
    {
    var matchingFields = e.Form.AllFields.Where(f => f.FieldType.Name.InvariantContains(”Recaptcha”) && f.PageIndex == (currentFormStep 1));

    if (matchingFields.Any())
    {

  16. Eric on December 10th, 2018

    currentFormStep-1 that is.

Leave a Reply