Custom client-side ASP.NET MVC 3 Validation

Question

I'd like to change the default behavior of the client-side validation that ASP.NET MVC 3 uses in this way:

If there is an error, I don't want any span added to the HTML to show me my mistake. The only thing I want is to change the color of the input field which has the error.

I don't know if this is the "right" way to do it but this is what I already did:

I edited the jquery.validate.unobtrusive.js:

  function onError( error, inputElement )
  {  // 'this' is the form element
        var container = $( this ).find( "[data-valmsg-for='" + inputElement[0].name + "']" ),
        replace = $.parseJSON( container.attr( "data-valmsg-replace" ) ) !== false;

  container.removeClass( "field-validation-valid" ).addClass( "field-validation-error" );

  inputElement.addClass( "custom-validation-error" ); // <--------- this is my edit
  error.data( "unobtrusiveContainer", container );

  if( replace )
  {
     container.empty();
     error.removeClass( "input-validation-error" ).appendTo( container );
  }
  else
  {
     error.hide();
  }
 }

This only adds the class named custom-validation-error which changes the color of the input field. But, how do I remove this class, if everything is ok?

And how do I stop from adding the spans to my HTML?

Thanks.

Darin Dimitrov · Accepted Answer · 2012-10-11 16:33:54Z

1

Simply remove the Html.ValidationMessageFor field which is responsible for adding the <span> tag in which the error message will be shown. So all you need is a Html.EditorFor. Then get rid of the javascript you have written.

answered Oct 11, 2012 at 16:33

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

celticharp Over a year ago

Thank you. I removed the Html.ValidationMessageFor, but I don't want to remove my javascript because I won't have the red border that I want. The red color is added to my non-valid input fields, my problem is that I cannot remove them when my input is valid!

Darin Dimitrov Over a year ago

But you don't need any javascript. When a field is invalid ASP.NET MVC automatically adds the custom-validation-error class to it. So all you have to do is to write the corresponding CSS rule and put a red border around it.

celticharp · Accepted Answer · 2012-10-12 08:43:32Z

0

Ok the answer was REALLY simple..

I just added this CSS rule:

.custom-validation-error  
{
   border: 1px solid red !important;
}

removed my javascript code and removed the Html.ValidationMessageFor as Darin Dimitrov suggested.

Damn, damn...

answered Oct 12, 2012 at 8:43

celticharp

1556 silver badges21 bronze badges

Collectives™ on Stack Overflow

Custom client-side ASP.NET MVC 3 Validation

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related