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

.NET
1

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:


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

Here is the the validation code:

Entities:



[COLOR=blue]namespace[/COLOR] Intranet.BusinessEntities 
{     [INDENT][COLOR=blue]public[/COLOR] [COLOR=blue]partial[/COLOR] [COLOR=blue]class[/COLOR] [COLOR=#2b91af]AnnualReportMessage[/COLOR]     
{         [COLOR=blue]
[/COLOR][/INDENT]
[INDENT=2][COLOR=blue]public[/COLOR] [COLOR=blue]string[/COLOR] Message { [COLOR=blue]get[/COLOR]; [COLOR=blue]set[/COLOR]; }            [COLOR=blue]
public[/COLOR] [COLOR=blue]int[/COLOR] AnnualReportYear { [COLOR=blue]get[/COLOR]; [COLOR=blue]set[/COLOR]; }         
[COLOR=blue]public[/COLOR] [COLOR=blue]string[/COLOR] Fice { [COLOR=blue]get[/COLOR]; [COLOR=blue]set[/COLOR]; }     
[/INDENT]
[INDENT]} 
[/INDENT]
}

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?



[COLOR=blue]using[/COLOR] System.ComponentModel.DataAnnotations; [COLOR=blue]
using[/COLOR] System.Web.Mvc;  [COLOR=blue]

namespace[/COLOR] Intranet.BusinessEntities 
{[INDENT][[COLOR=#2b91af]MetadataType[/COLOR]([COLOR=blue]typeof[/COLOR]([COLOR=#2b91af]AnnualReportMessage[/COLOR].[COLOR=#2b91af]AnnualReportMessageMetaData[/COLOR]))]    
 [COLOR=blue]public[/COLOR] [COLOR=blue]partial[/COLOR] [COLOR=blue]class[/COLOR] [COLOR=#2b91af]AnnualReportMessage[/COLOR]     
{         [/INDENT]
[INDENT=2][[COLOR=#2b91af]Bind[/COLOR](Exclude = [COLOR=#a31515]"AnnualReportYear,Fice"[/COLOR])]         [COLOR=blue]
public[/COLOR] [COLOR=blue]class[/COLOR] [COLOR=#2b91af]AnnualReportMessageMetaData[/COLOR]         
{             [/INDENT]
[INDENT=3][[COLOR=#2b91af]Required[/COLOR](ErrorMessage = [COLOR=#a31515]"Message cannot be empty"[/COLOR])]             [COLOR=blue]
public[/COLOR] [COLOR=blue]string[/COLOR] Message { [COLOR=blue]get[/COLOR]; [COLOR=blue]set[/COLOR]; }         
[/INDENT]
[INDENT=2]}     
[/INDENT]
[INDENT]} 
[/INDENT]
}

Rendered HTML:



<form action="[/NetSite/Sales/AnnualReportNote](http://www.sitepoint.com/forums/view-source:https://intranetdevelopment.nrccua-hq.local/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" />
[COLOR=#ff0000][B]<!-- FOLLOWING SHOULD NOT HAVE VALIDATION ATTACHED -->[/B][/COLOR]
<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" />

[COLOR=#ff0000][B]<!-- 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.  -->[/B][/COLOR]
<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](http://www.sitepoint.com/forums/view-source:https://intranetdevelopment.nrccua-hq.local/NetSite/App_Themes/Main/Images/ResponseAction/Buttons/btn_submit.gif)" class="distanceTop" alt="Submit" id="SubmitButton" />     </div> 
</form>

Javascript:



formSubmit: [COLOR=blue]function[/COLOR] ($form, currentForm) {[INDENT][COLOR=darkgreen]//$('#formId').get(0);[/COLOR]         
[COLOR=darkgreen]//$.removeData($form.get(0), 'validator');[/COLOR] 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                  
[COLOR=blue]if[/COLOR] ($form.validate().form()) {             [/INDENT]
[INDENT=2][COLOR=blue]var[/COLOR] $button = $([COLOR=maroon]"#"[/COLOR] + AnnualReportSpecialEcMessage.enums.submitButtonId);               [COLOR=blue]
var[/COLOR] message = $([COLOR=maroon]"#"[/COLOR] + AnnualReportSpecialEcMessage.enums.messageTextAreaId).getValue();               [COLOR=darkgreen]
//if (message == '')[/COLOR]             
[COLOR=darkgreen]//    jMessageError("Message can't be empty", $button, false, true);[/COLOR]             [COLOR=darkgreen]
//else {[/COLOR]             
jMessage([COLOR=maroon]"Processing request..."[/COLOR], $button, [COLOR=blue]true[/COLOR], [COLOR=blue]false[/COLOR]);             
$.ajax({                 [/INDENT]
[INDENT=3]cache: [COLOR=blue]false[/COLOR],                 
url: currentForm.action,                 
type: currentForm.method,                 
data: $form.serialize(),                 
error: [COLOR=blue]function[/COLOR](xhr, ajaxOptions, thrownError) {                     [/INDENT]
[INDENT=4]jMessageError(xhr.responseText, $button, [COLOR=blue]false[/COLOR], [COLOR=blue]true[/COLOR]);                 
[/INDENT]
[INDENT=3]},                 
success: [COLOR=blue]function[/COLOR](result) {                     [/INDENT]
[INDENT=4][COLOR=blue]if[/COLOR] (result.IsError) {                         [/INDENT]
[INDENT=5]jMessageError(result.Message, $button, [COLOR=blue]false[/COLOR], [COLOR=blue]true[/COLOR]);                     
[/INDENT]
[INDENT=4]} [COLOR=blue]
else[/COLOR] {                         [/INDENT]
[INDENT=5]jMessageOK(result.Message, $button, [COLOR=blue]false[/COLOR], [COLOR=blue]false[/COLOR]);                         
jMessageHideInterval(3000); [COLOR=darkgreen]//hide after 3 seconds[/COLOR]                     
[/INDENT]
[INDENT=4]}                 
[/INDENT]
[INDENT=3]}             
[/INDENT]
[INDENT=2]});             
[COLOR=darkgreen]//}[/COLOR]         
[/INDENT]
[INDENT]}     
[/INDENT]
}
2

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

3

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


[COLOR=darkgreen]return $([]).add(this.currentForm.elements)[/COLOR]             
[COLOR=darkgreen].filter(":input")[/COLOR]

with 

[COLOR=blue]return[/COLOR] $([COLOR=maroon]':input'[/COLOR], [COLOR=blue]this[/COLOR].currentForm)


Working code:



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