asp.net MVC4 client side model validation

Question

My model validation is not displaying error messages in the client browser. The form gets submitted but in my controller, my ModelState.IsValid is false with the appropriate error messages in my ModelState object. I am not sure how to debug what is going wrong.

My model class :
Imports System.ComponentModel.DataAnnotations
Public Class RateBO
<Required(AllowEmptyStrings:=False, ErrorMessage:="Quantity for Miles is required!")>
Public Property MilesQty As Decimal
Public Property MilesAmt As Decimal

<Required(AllowEmptyStrings:=False, ErrorMessage:="Quantity for Service is required!")>
Public Property FirstServiceQty As Integer
Public Property FirstServiceAmt As Integer
Public Property SubServiceQty As Integer
Public Property SubServiceAmt As Decimal
Public Property TotalRate As Decimal
End Class

My Viewmodel class :
Public Class FeeEntryVM
Public Property FeeRate As UnitPriceBO
Public Property UIFee As RateBO
End Class

My View :
@ModelType JUD.ITD.Portal.SSO.JudPortal.MarshalOrderRegistry.RateEntryVM

@Code
ViewData("Title") = "GetRateView"
Layout = "~/Views/Shared/_Layout.vbhtml"
End Code
@Using (Html.BeginForm("SubmitRate", "OrderRegistryService", FormMethod.Post, New With       {.id = "RateEntryForm"}))
@<text>
<div class='container-fluid span12' style="margin-left:-5%">
<table class="table">
<thead>
    <tr>
        <th class="span4 mobLabel" style="text-align:center">Rate Description</th>
        <th class="span2 mobLabel" style="text-align:center">Quantity</th>
        <th class="span1 mobLabel" style="text-align:center">Unit Price($)</th>
        <th class="span1 mobLabel" style="text-align:center">Amount($)</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="span4" style="text-align:center">Service</td>
        <td class="span2">
            @Html.TextBoxFor(Function(model) model.UIRate.FirstServiceQty, New With  {.class = "Ratehalf", .type = "text", .id = "serviceQty"})
            @Html.ValidationMessageFor(Function(model) model.UIRate.FirstServiceQty)
        </td>
        <td class="span1">
            @Html.TextBoxFor(Function(model) model.RateRate.FirstServiceRate, New With {.class = "Ratehalf", .readOnly = True, .type = "text", .id = "serviceRate"})
        </td>
        <td class="span1">
            @Html.TextBoxFor(Function(model) model.UIRate.FirstServiceAmt, New With  {.class = "Ratehalf", .readOnly = True, .type = "text", .id = "serviceAmt"})
            @Html.ValidationMessageFor(Function(model) model.UIRate.FirstServiceAmt)
        </td>
    </tr>
    <tr>
        <td class="span4" style="text-align:center"> Subsequent Services</td>
        <td class="span2">
            @Html.TextBoxFor(Function(model) model.UIRate.SubServiceQty, New With  {.class = "Ratehalf", .type = "text", .id = "subServiceQty"})
            @Html.ValidationMessageFor(Function(model) model.UIRate.SubServiceQty)
        </td>
        <td class="span1">
            @Html.TextBoxFor(Function(model) model.RateRate.SubServiceRate, New With {.class = "Ratehalf", .readOnly = True, .type = "text", .id = "subServiceRate"})
        </td>
        <td class="span1">
            @Html.TextBoxFor(Function(model) model.UIRate.SubServiceAmt, New With {.class = "Ratehalf", .readOnly = True, .type = "text", .id = "SubServiceAmt"})
            @Html.ValidationMessageFor(Function(model) model.UIRate.SubServiceAmt)
        </td>
    </tr>
    <tr>
        <td class="span4" style="text-align:center">Miles</td>
        <td class="span2">
            @Html.TextBoxFor(Function(model) model.UIRate.MilesQty, New With {.class =  "Ratehalf", .type = "text", .id = "milesQty"})
            @Html.ValidationMessageFor(Function(model) model.UIRate.MilesQty)
        </td>
        <td class="span1">
            @Html.TextBoxFor(Function(model) model.RateRate.MilesRate, New With {.class = "Ratehalf", .readOnly = True, .type = "text", .id = "milesRate"})
        </td>
        <td class="span1">
            @Html.TextBoxFor(Function(model) model.UIRate.MilesAmt, New With {.class = "Ratehalf", .readOnly = True, .type = "text", .id = "milesAmt"})
            @Html.ValidationMessageFor(Function(model) model.UIRate.MilesAmt)
        </td>
    </tr>
    <tr>
        <td class="span4" style="text-align:center"></td>
        <td class="span2"></td>
        <td class="span1" style="text-align:center;"><b>Total Rate($)</b></td>
        <td class="span1">
             @Html.TextBoxFor(Function(model) model.UIRate.TotalRate, New With {.class = "Ratehalf", .readOnly = True, .type = "text", .id = "totalRate"})
            @Html.ValidationMessageFor(Function(model) model.UIRate.TotalRate)
        </td>
        <td></td>
    </tr>
</tbody>
</table>
</div>
<div class="row offDisplay">
<div class="rowBig">
    <div class="span12"> 
        <button class="half btn btn-primary span2 text-center" id="btnSubmit"  type="submit">Submit</button>
        <button class="half offset1 btn btn-primary span2 text-center" id="btnCancel"  type="reset">Cancel</button>
    </div>
</div>
</div>
</text>
End Using

Answer 1

Your question seems a bit misleading, but I think you are asking why client validation isn't working. Make sure you have these two scripts on your page:

~/Scripts/jquery.unobtrusive.min.js

~/Scripts/jquery.validate.min.js

I usually put them in a bundle within BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

By using the asterisk * instead of min.js the bundler will use the non minified version in development and will use the minified version in production.

Then in my layout page:

 @Scripts.Render("~/bundles/jqueryval")

Answer 2

Use ModelState.IsValid() so and catch the exception that will explain what went wrong with the ModelState