jQuery Validation - form.valid() always returning true

Question

I have a situation when I try to check if a form is valid, but form.valid() always returns true. But if I try to validate the individual control, it returns false.

This is my form:

<div class="profilestagsedit">
    @using (Html.BeginForm("", "", FormMethod.Post, new { id = "tagsform" }))
    {
        @Html.ValidationMessageFor(x => x.EditTagsText)
        @Html.TextBoxFor(p => p.EditTagsText, new
           {
               @id = "txtprofileedittags"
           })
    }
</div>

This is my viewmodel:

[Required(AllowEmptyStrings = false, ErrorMessage = "Please enter at least one Tag ")]
public string EditTagsText { get; set; }

This is the jQuery code:

   $('#tagsform').removeData("validator");
   $('#tagsform').removeData("unobtrusiveValidation");
   $.validator.unobtrusive.parse('#tagsform');
   $('#tagsform').validate();

And on the save button click:

var isValid = $('#tagsform').validate().element($('#txtprofileedittags')); <-- false
$('#tagsform').valid() true <--

I would like the form.valid() return false as well, what am I doing wrong?

Solution 1

You should add required to the input

<input type="text" name="name" required>

See working demo here

For unobtrusive HTML 5-compatible attributes describe the validators to be attached to the input fields data-val="true".

See more info here

Solution 2

The question already has an accepted answer, but I believe that I've found more specific answer. I have found that if the FIRST validated element in the form has a 'name' tag then everything works as you would expect (that is, .valid() will return false if the form is invalid). The accepted answer conveniently included a 'name' tag and thus it worked.

In normal forms, you definitely need name tags 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' tag, because the data-binding works to keep your data model updated.

Comments

[Andrew Barber]

Please be sure to read the question carefully. The trouble occuring here would not have been caused by extra script references. And as I noted in your duplicate copy of this, those scripts do not conflict. One requires the other, in fact.

[War]

This is actually wrong, the required attribute is part of jquery validation not unobtrusive validation, and the server side framework should handle this for you should it be needed. When I run the given example it doesn't work. You just got lucky where 1 depends on the other it happens to solve this persons problem in this case.

[Nouphal.M]

i didn't said required attribute is part of unobtrusive validation. I just said "For unobtrusive HTML 5-compatible attributes describe the validators to be attached to the input fields data-val='true'. And the demo is not working because the jquery validation source file location is no more there. Could have used the console to check it. I will check if there is any validate cdn available Any way I appreciate your response.

[Nouphal.M]

Have changed the validate cdn. Please check the demo now.

[thelem]

This just validates the same thing a different way. It doesn't fix the reported problem with unobtrusive validation. The more info link is interesting, but is a long blog post and I couldn't see how it backed up this answer.