jquery validate always returning true

问题

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

回答1:

Try

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

before calling

$('#parameterForm').valid()

回答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.

回答3:

Did you add required to the HTML tag of the <input> or <textarea> ?

IE:

<input id="cemail" type="email" name="email" required/>

回答4:

For Googlers - This can also happen when you don't have the proper Bind Attributes in your MVC route. For example, if you post a form element with a name that's not in the Include list, you may get the error.

// make sure the list matches your form elements. 
public ActionResult Edit([Bind(Include = "Username,FullName,Email")] User user)

Either make sure your form names match those in the Include list, or remove the Bind Attribute all together (if you don't mind sacrificing security).

回答5:

I was referencing both files:

• jquery.validate.js
• jquery.validate.unobstrusive.js <-- remove this reference !

removing reference to jquery.validate.unobstrusive.js, fixed it for me

hope this helps somebody

来源：https://stackoverflow.com/questions/17881726/jquery-validate-always-returning-true