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

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.