Orchard CMS DataAnnotations - Client-side validation

Question

I'm trying to get unobtrusive client-side validation working within an Orchard module, but i've hit a problem.

In this example i'm just trying to enforce the RequiredAttribute on a textbox field, using Html.TextBoxFor().

It looks to me as though the custom ModelValidatorProvider implemented by Orchard (LocalizedModelValidatorProvider) prevents the HTML5 input attributes from being rendered, specifically:

data-val
data-val-required

for the standard DataAnnotations RequiredAttribute. These attributes are required by jQuery.validate.unobtrusive to work.

The LocalizedModelValidatorProvider maps a RequiredAttribute to a LocalizedRequiredAttribute, so perhaps this a bug (or unimplemented feature) in the Orchard ViewEngine when rendering a textbox input for a model property decorated with a LocalizedRequiredAttribute?

I suspect that somehow this isn't happening:

tagBuilder.MergeAttributes(htmlHelper.GetUnobtrusiveValidationAttributes(name, metadata));

(from System.Web.Mvc.Html.InputExtensions)

I'm currently running Orchard 1.3.9.

Note: A hacky workaround is to remove the registration of the LocalizedModelValidatorProvider in the OrchardStarter module and default back to the standard MVC 3 provider, although i'm keen not to disturb the Orchard source if at all possible (not to mention i might need localized messages at some point)...

Decollate

Was this ever solved. I am hitting the same brick wall in achieving this. – Reincarnation

Not by me - although it's worth noting this was in version 1.3.9 which is nearly a year old - it may have been fixed in the later versions. The work-around described above was ok for me in the end so didn't pursue it - I probably should have raised a bug... – Decollate

Why not try oforms, it has inbuilt dynamic form generation functionality it has inbuilt validation strategics you can define. gallery.orchardproject.net/List/Modules/Orchard.Module.oforms – Radiotelegraph

Answer 1

I spend 3 weeks to solve the problem of unobstrusive validation used in dialog boxes in MyPrettyCMS.

I also use LocalizedRequiredAttribute as you can see in those AutoGenerated MetaDataModels.

I don't know Orcad but I presume it presents user forms as JQuery Dialogs as I do.

There is two difficulties :

1 st : you have to (re)attach dialog fields to the form you will use to send data to the server.

2 nd : you have to (re)parse form to obtain a working unobstrusive validation

You will find here a complete JQuery Dialog based Form working with unobstrusive validation and focus the line $.validator.unobtrusive.parse(form); This force unobstrusive to analyze ajax added controls.

Look $.fn.jqDialogFunction in the JQuery common tool box

$.fn.jqDialogFunction = function (idDiv, titre, okFunction, openFunction) {
    var dialogBox = $(idDiv)
    //$(dialogBox).removeClass("notDisplayed");
    $(dialogBox).hide();
    $(dialogBox).dialog({
        title: titre,
        autoOpen: false,
        resizable: false,
        modal: true,
        minHeight: 450,
        minWidth: 800,
        open: openFunction,
        buttons: [
    {
        text: "Ok",
        click: okFunction
    }
            ,
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
    ]
    });
    var form = dialogBox.find("form");
    if (form != null) {
        $.validator.unobtrusive.parse(form);
    }
    $(idDiv).dialog('open');
}

Then Look the method $.fn.SaveContent -->$("#divStructurePage").parent().appendTo(form);

$.fn.SaveContent = function () {
    $(this).dialog("close");
    var content = tinyMCE.activeEditor.getContent();
    $("#hidNewContent").val(content);
    var v = $("#StructurePage_FK_LayoutMenu_Translation").val();
    var form = $("#frmManagedContent");
    $("#divStructurePage").parent().appendTo(form);
    form.attr("action", "/"+ $("#hidControllerName").val() +"/Save/" + v);
    form.submit();
}

Redhanded

Answer 2

Add this code in your Editor Template View

 @model ABC.Models.ModelName
@{


Script.Require("jQuery").AtHead();
Script.Include("jquery.validate.min.js").AtHead();
Script.Include("jquery.validate.unobtrusive.min.js").AtHead(); }

Add "jquery.validate.min.js,jquery.validate.unobtrusive.min.js" in your module "Scripts" folder.

Add the below setting in Web.cofig file.

<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

Brandenburg