Jquery validate always returns true

Question

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

I had a submit button initially, and she just submitted the form. I changed the submit button to a regular button and tried calling $ ('# formname'). Validate (), but it always returns true (even the required fields are not populated). Other views seem to work fine (which don't use Ajax.BeginForm).

I refer to jquery, jquery-ui, jquery.validate, jquery.validate.unobtrusive and jquery.unobtrusive-ajax.

Does anyone have any ideas / suggestions that I am missing?

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

Below is my code (this is inside the main page that links to 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 -----------------------------

call $.validator.unobtrusive.parse($('#parameterForm')); up to $('#parameterForm').valid(); fixed the problem

Answer 1

Try

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

before calling

$('#parameterForm').valid()

Answer 2

The question already has an accepted answer, but here is another possible reason for anyone who finds this in the future ...

Make sure your first checked item in the form has a name attribute, for example:

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

I spent 2 hours tracking the same problem, and I found that if the FIRST checked item in the form has a name attribute, then everything works as you would expect (i.e. .valid() will return false if the form is invalid) . It doesn't seem to matter if the other checked items have name attributes or not.

In normal forms, you definitely need name attributes because this is what is used when data is sent to the server. But in more modern environments, such as those that use Knockout, there is no reason to have a name attribute for input elements, because data binding works to update your data model.

Answer 3

Have you added the required HTML <input> or <textarea> ?

IE:

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

Answer 4

For Google, this can also happen if you do not have the correct binding attributes in your MVC route. For example, if you publish a form element with a name that is not in the Include list, you may receive an error message.

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

Either make sure that the names of your forms match the names in the Include list, or remove the Bind attribute all at once (if you don't mind sacrificing security).

Answer 5

I referenced both files:

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

remove link to jquery.validate.unobstrusive.js, fixed it for me

hope this helps someone