CODEWITHSUNDEEP
c#asp.netasp.net-mvcvalidation
pitaridis
pitaridis

Reputation: 2983

Correct message for ASP.NET MVC client side Validation

In ASP.NET MVC it is very easy to validate the data that a user typed in a textbox. By Adding the following line we ask from the framework to display an error message when the user types something wrong. 

@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })

In my application I want this functionality but I also want to display a message when the user typed a correct information. Is there any html helper like the ValidationMessageFor which will display a message to inform the user that the typed information is correct?

Upvotes: 1

Views: 1639

Answers (3)

rism
rism

Reputation: 12142

You could use whether or not the validation message is showing as a condition upon which to base showing your confirmation with onfocusout as your trigger. So given some html like this:

<form id="myFrm" action="/Account/Login?ReturnUrl=%2F" class="form-horizontal" method="post" role="form">            <h4>Use a local account to log in.</h4>
   <hr />
   <div class="form-group">
         <label class="col-md-2 control-label" for="Email">Email</label>
         <div class="col-md-10">
                <input class="form-control myFrmInputs" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Email" name="Email" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
               <span id="confirmEmail" class="confirmationMessage">Correct</span>
         </div>
      </div>
      <div class="form-group">
         <label class="col-md-2 control-label" for="Password">Password</label>
         <div class="col-md-10">
            <input class="form-control myFrmInputs" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
            <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
            <span id="confirmPassword" class="confirmationMessage">Correct</span>
         </div>
    </div>
</form>

Some CSS like so:

.confirmationMessage {
    display:none;
}

Javascript / jquery 

  $( document ).ready(function() {
            $(".myFrmInputs").each(function() {            
                $(this).focusout(function() {
                   //var errorSpan = $("#myFrm span[data-valmsg-for='" + $(this).attr('id') + "']");
                   var errorSpan = $("#" + $(this).attr('id') + "-error");
                   if (errorSpan.length>0 && !$(errorSpan).is(":visible")) 
                   {
                       $("#confirm" + $(this).attr('id')).show();
                   }
                });    
            });
    });

You can display a confirmation based solely on whether the input has not been tagged as invalid. This is only for text inputs but you can jimmy the method for other input types. It's hardly production ready but it works: http://jsfiddle.net/f55xsLjx/1/

Upvotes: -1

pitaridis
pitaridis

Reputation: 2983

I found an answer to my problem. This is not the best solution but it works. I am going to write it here because more people may need it.

I created a timer and I check every X milliseconds all the validated properties of the model and if the error message of the specified property has the class 'field-validation-valid', this means that the property the user has typed is valid so I show the valid error message. Otherwise I hide it.

In the view I have added a div which contains the message for the valid field which has an id equal to ValidNameFor followed by the name of the property.

@Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
<div id="ValidNameForSurname">This is correct</div>

The javascript

$(document).ready(function () {
    setInterval(function ()
    {
        $(".form-control").each(function () {
            var confirmSpan = $("span[data-valmsg-for='" + $(this).attr('id') + "']");
            if (confirmSpan.hasClass("field-validation-valid")) 
                $("#ValidNameFor" + $(this).attr('id')).show();
            else
                $("#ValidNameFor" + $(this).attr('id')).hide();
        });
    }, 500);
});

A way to remove the timer would be to have a jQuery event which will inform me when a class has been added or removed from an element. If there was such an event I could remove the timer and show or hide the correct text when the class 'field-validation-valid' has been added to the validated property. If someone knows how to add such event to an element it would be nice to know.

Upvotes: 0

teo van kot
teo van kot

Reputation: 12491

If you have only simple cases of client validation you can try to change your css. Unobtrusive validation library set valid class to fields which is valid.

So you can change your css like this:

input.valid, select.valid, textarea.valid{
   border-color: green;
}

More complex cases, that need server participation, can only be achived if you send AJAX call on field change.

Upvotes: 0

Related Questions