Question

i am having a problem with validating a form in MVC Razor the Binding class is the following based off an abstract class (there is no validation in the abstract class)

[GeminiDisplayName("You are about To reject the following Purchase Order", false)]
    public class PORejected : PoApprovalItems
    {
        public PORejected() { }
        [GeminiDisplayName("Rejection Reason")]
        [Required(AllowEmptyStrings = false, ErrorMessage = "Rejection Reason is Required")]
        public string RejectReason { get; set; }

        public override bool IsApproved
        {
            get
            {
                return false;
            }
        }
    }

and the view is as follows

@model Gemini.Models.PORejected
    @section Head{
        <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/PageScripts/_Approval.js")" type="text/javascript"></script>
    }
    @section TabHeader{
        <li><a href="#ApprovalItem">Reject Approval for PO @Model.PO_Number</a></li>
    }
    @section TabContent{
        @{
            Html.EnableClientValidation();
        }
        <div id="ApprovalItem">
            @{
                @Html.ValidationSummary(false)
                using (Html.BeginForm("Approve", "PO", FormMethod.Post))
                {

                @Html.Partial("Approval/ApprovalDetails", Model)
                <div class="display-label">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td width="15%">
                                @Html.LabelFor(x => x.RejectReason)
                            </td>
                            <td>
                                @Html.TextAreaFor(x => x.RejectReason, new { @Class = "mceEditor required", @style = "width:60%;" })
                                @Html.ValidationMessageFor(x => x.RejectReason)
                            </td>
                        </tr>
                    </table>
                    <div style="float: right;">
                        <input type="button" value="Close" />
                        <input type="submit" value="Reject" />
                    </div>
                </div>
                    Html.EndForm();
                }
            }
        </div>
    }

the thing is when i click the submit button it fires off before doing any validation even though it should validate

my question is what am i doing wrong?

UPDATED
found the answer eventually i was missing the following from the page.
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

Answer 1

found the answer eventually i was missing the following from the page. <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>