Clientside validation using Xforms - MVC application - client-side-validation

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.

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: