jquery validate always returning true

Question

I am using MVC4 w/JQuery and I have a form I created using the @Ajax.BeginForm. It has required fields (set on its view model). I am trying to validate the form before it is submitted back; however, it does not seem to validate.

I had a submit button originally and it was just submitting the form. I changed the submit button to a regular button and tried calling $('#formname').validate() but it always returns true (even tho required fields are not filled in). Other views seem to work fine (that are not using the Ajax.BeginForm).

I am referencing jquery, jquery-ui, jquery.validate, jquery.validate.unobtrusive, and jquery.unobtrusive-ajax.

Anyone have any ideas/suggestions what I am missing?

edit---------------------------------------------------------------------------

Below is my code (this is inside a master page that references the jquery scripts):

@model AimOnlineMRA.Models.Reports.DateRangeViewModel 

@using (Ajax.BeginForm("GetReport", "Reports", new AjaxOptions
{
    UpdateTargetId = "report_pane", HttpMethod = "Post"}, new {@id="parameterForm"}))
{
    @Html.AntiForgeryToken()

<script type="text/javascript">
    $(document).ready(function () {
        ApplyTheme();

        $('#btnYes').click(function() {
            $('#RunSpecificDateRange').val('true');

            $('#yesNo').hide();
            $('#dateRangeForm').show();
        });

        $('#btnCancel').click(function () {
            $('#report_pane').html('').hide();
        });

        $('#btnOk').click(function () {
            //if ($('#parameterForm').valid()) {
            //    alert('valid');
            //} else {
            //    alert('invalid');
            //}
        });

        $('#dateRangeForm').hide();

        $('#BeginDate').datepicker({
            showOn: 'button',
            buttonText: 'Date Picker',
            buttonImageOnly: true,
            buttonImage: '@Url.Content("~/Content/Icons/calendar-icon.png")'
        });

        $('#EndDate').datepicker({
            showOn: 'button',
            buttonText: 'Date Picker',
            buttonImageOnly: true,
            buttonImage: '@Url.Content("~/Content/Icons/calendar-icon.png")'
        });
    });
</script>

<div class="margin-auto" style="width: 400px">

    <div id="yesNo">
        <span class="bold">Do you want to run this report for a specific date range?</span> 
        <br /><br />
        @Html.Button("Yes", "btnYes")
        @Html.Button("No", "btnNo")
    </div>
    <div id="dateRangeForm">
        <span class="bold">Date Range</span> 
        <br /><br />
        <div class="left">
            <div class="left clear-both">
                @Html.LabelFor(x => x.BeginDate) <br />
                @Html.TextBoxFor(x => x.BeginDate, new {@style="vertical-align:top"})
                @Html.ValidationMessageFor(x => x.BeginDate)
            </div>
            <div class="left clear-both m-top-5">
                @Html.LabelFor(x => x.EndDate) <br />
                @Html.TextBoxFor(x => x.EndDate, new {@style="vertical-align:top"})
                @Html.ValidationMessageFor(x => x.EndDate)
            </div>
        </div>
        <div class="left m-left-10">

        </div>
        <div class="left clear-both m-top-10">
            @Html.Button("Ok", "btnOk")
            @Html.Button("Cancel", "btnCancel")
        </div>
    </div>
</div>
}

-----------------RESOLUTION-----------------------------

calling $.validator.unobtrusive.parse($('#parameterForm')); before $('#parameterForm').valid(); fixed the issue

Answer 1

Try

$.validator.unobtrusive.parse($('#parameterForm'))

before calling

$('#parameterForm').valid()

Answer 2

Question already has an accepted answer, but here's another possible reason for anyone that finds this in the future...

Make sure that your first validated element in the form has a name attribute, like this:

<input type=text required name='blah' />

I spent 2 hours tracking down this same issue, and I found that if the FIRST validated element in the form has a name attribute then everything works as you would expect (that is, .valid() will return false if the form is invalid). It seems to make no difference whether the other validated elements have name attributes or not.

In normal forms, you definitely need name attributes because that's what's used when the data gets submitted to the server. But in more modern environments, such as those using Knockout, there's no reason to have a name attribute on input elements, because the data-binding works to keep your data model updated.