Html.ValidationSummary doesn't show off when valid data is entered - asp.net

Question

I'm working on a project which uses ASPNET MVC 3, unobstrusive javascript and Razor
I have a partial view with Ajax.BeginForm containing fields like this:
#Html.TextBoxFor(model => model.FirstName, new { #class = "txt-input", placeholder = "Eg. First Name", maxlength = 50 })
#Html.ValidationMessageFor(model => model.FirstName, "*", new { #class = "form-comments redtxt" })
Then at the end of the form I have this:
#Html.ValidationSummary(false, "Please complete the required fields", new { #class = "form-comments redtxt" })
When I enter no value it correctly shows "*" near the textbox, and "Please complete the required fields" in the validation summary.
The problem is that when I enter a correct value only the "*" disspears and the "Please complete the required fields" remains.
I need to add this in the css in order to not show "*" nor the "Please complete the required fields" when the patial view is loaded for the first time.
.validation-summary-valid
{
display: none;
}
.field-validation-valid
{
display: none;
}
How can I make the validation summary dissapear when valid data is entered?
Thanks in advance! Guillermo.

Answer 1

As far as i understood ur problem, u can use below written code. Its just a hack.
<script>
jQuery(function () {
jQuery('form')
.find('input')
.bind('keyup', function () {
var _summary = jQuery('.form-comments');
if ($(this).valid()) {
_summary.hide();
}
else {
_summary.show();
}
})
});
</script>

Answer 2

As why it's still displaying I don't know.
But a quick fix is to put an if block around your #Html.ValidationSummary and check to see if the model is valid
# if(!ViewContext.ViewData.ModelState.IsValid){
#Html.ValidationSummary(false, "Please complete the required fields", new { #class = "form-comments redtxt" })
}
I usually put my validation summary in a dialog and i just don't display the dialog div if Page.IsValid is true
--Update here is a code snippet that I know works
#{ if(!ViewContext.ViewData.ModelState.IsValid){
<div id="errors" class="DisplayErrors">
#Html.ValidationSummary()
</div>
}}
<script type="text/javascript">
$(function () {
$(".Date").datepicker();
$(".button").button();
$(".DisplayErrors").dialog({ autoOpen: true, title:"Errors" });
});
</script>