Client-side validation in popup forms

Sep 22, 2011 at 3:41 PM
Edited Sep 22, 2011 at 3:43 PM

Hello, very good project

Question about client validation in popup forms:

1 i setup Settings.PopupForm.ClientSideValidation = true; in global on app start

2. i have model with next field


        public string Name { get; set; }


3.  i have next lines in view code


@(Html.MakePopupForm("create", successFunction: "create", height:480, clientSideValidation: true))
@Html.PopupFormActionLink("Create","Add New Main Category",null, new { @class = "abtn" })


Form loads correct, but shows validation message only after POST request  not before it

i did some research, i found that we need to call $.validator.unobtrusive.parse( $("#<%=o %> form")); after we get form html content and  append it to container, because when it calls $.validator.unobtrusive.parse on document ready, popup form doesn't exist.

so, i update popupform.ascx


function update<%=o %>(data) {
            l<%=o %> = null;
            $("#<%=o %>").html(data);
             <% if(Model.ClientSideValidation){%>
            $.validator.unobtrusive.parse( $("#<%=o %> form"));
            <%} %>
            $("#<%=o %> form").ajaxForm({            
            <% if(Model.ClientSideValidation){%>
                beforeSubmit: function () { return $("#<%=o %> form").validate().valid(); },
            <%} %>
                success: OnSuccess<%=o %>
            $("#<%=o %>").dialog('open');
            $("#<%=o %> form input:visible:first").focus();


and it starts work correct

Is this a bug or i did something wrong in settings of popup froms?


Sep 22, 2011 at 5:19 PM

well, if you're not going to have unobstrusive.js included it's gonna be one, because you'll get error on unobstrusive.parse line

Sep 22, 2011 at 7:06 PM

Yeah,  i see now that you doesn't use unobstrusive lib in live demo. can i ask why?

Sep 22, 2011 at 9:20 PM

it works without it ;)

Oct 15, 2011 at 12:45 AM
Edited Oct 15, 2011 at 12:58 AM

having same difficulty as recall in getting clientsidevalidation working in prodinner project

in project awesome, the only client side behavior i get with the live demo is when i submit, the messages come up.

then as i start to type into an empty required field the message disappears

if i just tab through required fields and leave them blank client side validation is not triggered

will keep recall's unobtrusive js solution in mind, as i've been completely unsuccessful so far

Oct 17, 2011 at 7:58 AM

that's how jquery.validation works