ASP.NET MVC 3 Client Validation

Question

I have the following viewmodel:

public class ViewModel
{
    [Display(Name = "firstname", ResourceType = typeof(Views.Validation))]
    public string firstname { get; set; }

    [Required(ErrorMessageResourceName="required", ErrorMessageResourceType = typeof(Views.Validation))]
    [Display(Name="lastname", ResourceType = typeof(Views.Validation))]
    public string lastname { get; set; }

    ...
}

and my HTML view:

    ...
<div class="row valid showMsg">
    <div class="itemWrap clearfix">
        <label>@Html.LabelFor(model => model.firstname)<span class="iconReq">&nbsp;</span>:</label>
        @Html.EditorFor(model => model.firstname)
    </div>
    <div class="info">
        <p class="errorMsg">@Html.ValidationMessageFor(model => model.firstname)</p>
        <p class="infoMsg">info message here</p>
        <p class="focusMsg">text on active</p>
    </div>
</div>
...

If you notice in my HTML view i have a <div class="row valid showMsg"> with a class "showMsg" that controls the display of messages inside my <div class="info">.

Now, for server validation i wrote a custom HTML helper that adds that that class "showMsg" to the div when not valid like so:

 public static MvcHtmlString ValidationRowFor<TModel, TProperty>(this HtmlHelper<TModel> html, Expression<Func<TModel, TProperty>> expression)
 {
     MvcHtmlString normal = html.ValidationMessageFor(expression);

     if (normal != null)
     {
         return MvcHtmlString.Create("errorOn");
     }

     return null;
 }

and use it like so:

<div class="row valid @Html.ValidationRowFor(model => model.firstname)">

I would like to do the same for client validation. So that it would automatically add "showMsg" class to the parent when Error. How would i do it?

Thanks.

Edit: ok this works for regular HTML but not in MVC3 ??

$(function(){
 var validator = $(".form").validate({
          highlight: function(element) {
             $(element).parents().closest('div.row').addClass('errorOn');
          },

          unhighlight: function(element) {
             $(element).parents().closest('div.row').removeClass('errorOn');
          }
 });
});

With client validation you mean jquery or something like this that help you with data validation and display errors? — Roberto Conte Rosito
– Roberto Conte Rosito, Commented Jan 25, 2011 at 8:00
yes. i would like to 'inject' or modify 'jquery.validate.unobtrusive.min.js' new 'Unobtrusive Client Validation in ASP.NET MVC 3' so it would do it for me automatically. meaning it would add that class for each invalid entry. — ShaneKm
– ShaneKm, Commented Jan 25, 2011 at 8:30

Darin Dimitrov · Accepted Answer · 2011-01-25 08:17:33Z

1

Maybe something among the lines should do the job:

$(function () {
    $('form').submit(function () {
        $(this).validate().invalidElements().each(function () {
            $(this).closest('div.row.valid').addClass('showMsg');
        });
    });
});

answered Jan 25, 2011 at 8:17

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Darin Dimitrov Over a year ago

@jgauffin, sure that's what the $(function() { part does, it is equivalent to $(document).ready(function() {.

ShaneKm Over a year ago

this only works on submit and DOES NOT work when editing the form.

Darin Dimitrov Over a year ago

@Shane, what do you mean by editing the form? You mean like onblur? In this case you could simply use that event instead of submit.

ShaneKm Over a year ago

Hey Darin, your stuff works. but how do I REMOVE the class on lost focus if field is valid?

Darin Dimitrov Over a year ago

@Shane, like this: $('div.row.valid').removeClass('showMsg'); immediately before calling the $(this).validate(). This way you are removing the showMsg class from all fields and then if there are any errors only the corresponding fields will get the showMsg class.

Roberto Conte Rosito · Accepted Answer · 2011-01-25 11:53:39Z

if you use jquery validation rules, you can to something like this (i get this code from my project, i change what you need, errorClass:

var contactsRules = {
    errorClass: 'showMsg',
    rules: {
        Name: { required: true },
        Surname: { required: true },
        Email: { required: true, email: true }
    },
    messages: {
        Name: {
            required: '<p class="errore">*</p>'
        },
        Surname: {
            required: '<p class="errore">*</p>'
        },
        Email: {
            required: '<p class="errore">*</p>',
            email: '<p class="errore">*</p>'
        }
    }
}

I suppose you have a form called "contact", create a js file with this code:

$(document).ready(function() {
   var contactRules = ... //The code posted before this
   $('#contact').validate(contactRules);

   $('#contact').submit(function() {
      return $(this).validate();
   });
});

I hope this can help

Collectives™ on Stack Overflow

ASP.NET MVC 3 Client Validation

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related