Summary Validation

Feb 26, 2009 at 4:10 PM
Hi everybody!

How can I use client side Summary Validation with xVal?

Feb 26, 2009 at 4:59 PM
Are you talking about the mvc Html.ValidationSummary helper?

If so then the call toAddModelStateErrors will add any validation errors to the ModelState which is used by the Html.ValidationSummary to product the list of errors.

Can you be more specific about your requirements?

Thanks, Mark
Feb 26, 2009 at 5:15 PM
Thanks for your help!

But, when I use Html.ClientSideValidation() xVal creates all jQuery validators for me.. 
so.. they are client validators and Html.ValidationSummary() is a method for show server validators messages, Am'I correct?

Searching in the forumns I found the solution:

1 - First Step:

On the  xVal.jquery.validate.js file modify the method:

_ensureFormIsMarkedForValidation: function(formElement) {
            if (!"isMarkedForValidation")) {
      "isMarkedForValidation", true);
                    errorClass: "field-validation-error",
                    errorElement: "span",
                    errorLabelContainer: $("ul", $('div.error-container')),
                    wrapper: 'li',
                    highlight: function(element) { $(element).addClass("input-validation-error"); },
                    unhighlight: function(element) { $(element).removeClass("input-validation-error"); }

Added lines:
errorLabelContainer: $("ul", $('div.error-container')),
wrapper: 'li',
These will told to jQuery validattion to show any messages in a div formated by ul and li elements;

2 - Second Step:

add thes html elements on view:

<div class="error-container">

This solution works fine to me, but are there any other better solution? hehehehe

Thanks again!!


Feb 27, 2009 at 1:45 PM
You are correct.

The thing is that you end up having two DIV's, one where you want the client side validation rules to appear then a seperate one is generated from the ValidationSummary call. My problem is that I would like to have the following:

<div id="error-container" style="display:none">
<ul id="error-list">

Then I get my Client side messages being injected into the error-list by editing the xval.js file and the Html helper for the server side errors appears in the same list.

I have ended up creating my own version of the Html.ValidationSummary helper which just writes out <li>Error message in here</li> to achieve this effect. Then you will need to overcome the problem that although your messages have been outputted the error-container div is still hidden. I haven't decided what the correct approach to "show" the error-container div is but you can choose from:

1.) Creating another helper method which checks the modelstate and outputs some javascript to show the DIV on page load.
2.) Create another html helper which you use like this <div id="error-container" style="<%=Html.ShowIfErrors()%>"> ...</div>

Maybe Steve S can think of some more elegant ways in which we can get over this issue.


Feb 27, 2009 at 1:46 PM
Hey - just wanted to acknowledge this discussion. I'm going to be intensely busy for the next week, but will then come back to this and will see if I can suggest anything else.
Mar 1, 2009 at 12:40 PM
Thanks Steve - I'd also be very interested in getting support for ValidationSummary. I'll have a dig through your code and see if there's any obvious nice ways to make this work!
Mar 31, 2009 at 6:01 PM
I personally would like to see something like this...

= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors and try again.") %>
<span id="error-container">client side errors go here</span>

having jQuery insert a <ul> tag if necessary and wrap the messages in a <li> tag. Nirvana would be to have a custom ValidationSummary helper that emitted the validation summary header text to JQuery of something similar (maybe a display:none styled element) so that the header message could appear for both server-side and client-side validation rule error messages. I think we all would like to create a consistent validation error message display pattern for our users.