MVC3 - Razor - Client Validation Problem in IE 8 and Bind Exclude Problem

[tahirjadoon]

My validation is happening in IE9 and FF but it is not happening in IE8. I am using HTML 5 and have "section" js fix in place. Is it interfering with my client validation?

JS fix for IE 8 and lower for html 5 sections:

<!--[if lt IE 9]> <script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script> <![endif]-->

Here is the the validation code:

Entities:

namespace Intranet.BusinessEntities 
{     
public partial class AnnualReportMessage     
{         
public string Message { get; set; }            
public int AnnualReportYear { get; set; }         
public string Fice { get; set; }     
} 
}

In Validation folder i have the metadata, i am excluding AnnualReportYear and Fice. The values show up just fine in my rendered html, hidden fields, Message_AnnualReportYear and Message_Fice. When the form posts, these are 0 and null. Why are these not posting properly?

using System.ComponentModel.DataAnnotations; 
using System.Web.Mvc;  

namespace Intranet.BusinessEntities 
{
[MetadataType(typeof(AnnualReportMessage.AnnualReportMessageMetaData))]    
 public partial class AnnualReportMessage     
{
[Bind(Exclude = "AnnualReportYear,Fice")]         
public class AnnualReportMessageMetaData         
{
[Required(ErrorMessage = "Message cannot be empty")]             
public string Message { get; set; }         
}     
} 
}

Rendered HTML:

<form action="/NetSite/Sales/AnnualReportNote" id="AnnualReportMessage" method="post">

<input name="__RequestVerificationToken" type="hidden" value="mMmaHM34hYxQnbqgVs8GooKbjgo5exLzPs+XgE0qyZzW4JJDCcTs3UGJw8T2fud2QZ3XnJWl4LjNBh9GDfWbjoWc21Z6ty1OCuDfUEKpsoszpBNcUm6IXUVKs5Ht/2/9OR30pEvTvejT2lCZtShzj2qHwMY6VGKUHyjnh3f3SRr3UQwoVN60igVeQG66+FQi" />
<input id="Fice" name="Fice" type="hidden" value="XXXXXX" />
<!-- FOLLOWING SHOULD NOT HAVE VALIDATION ATTACHED -->
<input data-val="true" data-val-number="The field SetupYear must be a number." data-val-required="The SetupYear field is required." id="SetupYear" name="SetupYear" type="hidden" value="2012" />

<!-- Following two are excluded for validation, Message_Fice has no validation applied and Message_AnnualReportYear has validation applied here but FF and IE 9 do not prompt. When the form is posted, the values for these do not post.  -->
<input data-val="true" data-val-number="The field AnnualReportYear must be a number." data-val-required="The AnnualReportYear field is required." id="Message_AnnualReportYear" name="Message.AnnualReportYear" type="hidden" value="2012" />
<input id="Message_Fice" name="Message.Fice" type="hidden" value="XXXXXX" />    


<div>     <textarea cols="70" data-val="true" data-val-required="Message cannot be empty" id="Message_Message" name="Message.Message" rows="12"> Some test message from the dev site...</textarea>     </div>      
<div>         <span class="field-validation-valid" data-valmsg-for="Message.Message" data-valmsg-replace="true"></span>     </div>     
<div>         <input type="image" src="/NetSite/App_Themes/Main/Images/ResponseAction/Buttons/btn_submit.gif" class="distanceTop" alt="Submit" id="SubmitButton" />     </div> 
</form>

Javascript:

formSubmit: function ($form, currentForm) {
//$('#formId').get(0);         
//$.removeData($form.get(0), 'validator'); In FF and IE 9, client validation displayed and form got posted also at the same time. FF and IE 9 validate properly when this is commented                  
if ($form.validate().form()) {
var $button = $("#" + AnnualReportSpecialEcMessage.enums.submitButtonId);               
var message = $("#" + AnnualReportSpecialEcMessage.enums.messageTextAreaId).getValue();               
//if (message == '')             
//    jMessageError("Message can't be empty", $button, false, true);             
//else {             
jMessage("Processing request...", $button, true, false);             
$.ajax({
cache: false,                 
url: currentForm.action,                 
type: currentForm.method,                 
data: $form.serialize(),                 
error: function(xhr, ajaxOptions, thrownError) {
jMessageError(xhr.responseText, $button, false, true);                 
},                 
success: function(result) {
if (result.IsError) {
jMessageError(result.Message, $button, false, true);                     
} 
else {
jMessageOK(result.Message, $button, false, false);                         
jMessageHideInterval(3000); //hide after 3 seconds                     
}                 
}             
});             
//}         
}     
}

[tahirjadoon]

I have taken out the JS fix for IE 8 and html5 and IE 8 still didn't do client validation.

[tahirjadoon]

It was jquery.validate.js that had the issue. Either get a latest version or change

return $([]).add(this.currentForm.elements)             
.filter(":input")

with

return $(':input', this.currentForm)

Working code:

//return $([]).add(this.currentForm.elements)             
//.filter(":input")             
return $(':input', this.currentForm)             
.not(":submit, :reset, :image, [disabled]")             
.not( this.settings.ignore )             
.filter(function() {
!this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);                              
// select only the first element for each name, and only those with rules specified                 
if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
return false;                                  
rulesCache[this.name] = true;                 
return true;             
});