CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-3client-side-validation
celticharp
celticharp

Reputation: 155

Custom client-side ASP.NET MVC 3 Validation

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.

Upvotes: 0

Views: 1038

Answers (2)

celticharp
celticharp

Reputation: 155

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...

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

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.

Upvotes: 1

Related Questions