Clientside validation using Xforms - MVC application

Question

I am trying to perform a client side form validation using an episerver xform the compiled html looks like this: http://codepen.io/anon/pen/ojGGJw Any guidance on how to achieve that? I am thinking about using .validate library but I will have an issue if we add a new control to the form through epi. Also i tried to use an AJAX call with something like this:

 $.ajax({
        url: "/industry/XFormPost?XFormId=0643b992-56c6-40a5-91eb-c557443630e0&failedAction=Failed&successAction=Success&contentId=36",
        data: $(this).serialize(),
        type: "POST",
        success: function () {
            alert('Hello this is a valid form');
        }
    });

it fires the event but does not save my form into the DB. even though all the fields i passed are valid

Montmartre

How do you handle your XFormPostedData, where's the logic for that? – Composer

Answer 1

Regrettably XForms in its current state is notoriously cumbersome to work with when it comes to customization. For custom rendering and/or validation we often implement our own rendering completely.

There are numerous articles about how to achieve it, but it can be time-consuming. :/

Client-side validation only can of course be achieved by attaching event handlers to the default generated HTML, but that's usually not enough. Although this can combined with server-side events, it is difficult to properly customize how XForms work for the end-user without custom rendering.

Kieger

Answer 2

Here's what i ended up doing , to include a full client side validation for my form using .validate() js library. I am sure there is other ways to achieve that, so here's my version:

EpiServer has a class field that you can use for all of your controls (shamefully there is no hidden field by the way, but that's a different story). So i added a css class named 'requiredField' and added extra classes for different kind of validations , such as 'emailField' for email validation and 'halfWidthField' for CSS layout purposes for my form.

In order to .Validate to work , i need to add necessary attributes. to achieve that , I created a small script to add those attributes based on the class names I already assigned. my JS code looks something like this:

 $(".contact-form").find(".requiredfield").each(function () {
        $(this).prop('required', true);
    });
    $(".contact-form").find(".emailfield").each(function () {
        $(this).attr('type', 'email');
    });

lastly: for the ajax call to happen , I changed the view and made an Ajax call instead of a regular post call.

 @using (Ajax.BeginForm("", "",
                     new AjaxOptions
                     {
                         HttpMethod = "POST",
                         Url = Model.ActionUri
                     }
                     ))
                 {
                     Html.RenderXForm(Model.Form);
                 }

It works as expected and I can customize the validation as needed. The final form looks something like this:

Montmartre