MVC4: jQuery Validation Unobtrusive Native working incorrectly

Question

My MVC4 web app is built on Umbraco 7. I have installed the following nuget packages:

jQuery 1.10.2
jQuery.Validation 1.11.1
jQuery.Validation.Unobtrusive.Native.MVC4 1.1.0.0

The unobtrusive validation is from this website: http://jqueryvalidationunobtrusivenative.azurewebsites.net/Home/GettingStarted

My view looks like this:

<form id="frmContact" method="post" action="@Url.Action("ContactForm", "ContactFormSurface")">
<div>
    <label>Full Name</label>
    @Html.TextBoxFor(m => m.FullName, true)
    @Html.ValidationMessageFor(m => m.FullName, "*")
</div>
<div>
    <label>Company</label>
    @Html.TextBoxFor(m => m.Company, true)
    @Html.ValidationMessageFor(m => m.Company, "*")
</div>
<div>
    <label>Email Address</label>
    @Html.TextBoxFor(m => m.EmailAddress, true)
    @Html.ValidationMessageFor(m => m.EmailAddress, "*")
</div>
<div>
    <label>Message @Html.ValidationMessageFor(m => m.Message, "*")</label>
    @Html.TextAreaFor(m => m.Message, true, 10, 30, new { @class = "input-xl" })
</div>
@Html.ValidationSummary(false, "Please correct the following errors before submitting the message")
<div>
    <button type="submit">Send</button>
</div>
</form>

In the web.config:

    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

My model:

public class ContactFormViewModel
{
    [Required, Display(Name = "Full Name")]
    public string FullName { get; set; }

    public string Company { get; set; }

    [Required, Display(Name = "Email Address")]
    [RegularExpression(@"^(?!\.)(""([^""\r\\]|\\[""\r\\])*""|([-a-z0-9!#$%&'*+/=?^_`{|}~]|(?<!\.)\.)*)(?<!\.)@[a-z0-9][\w\.-]*[a-z0-9]\.[a-z][a-z\.]*[a-z]$", ErrorMessage="Not a valid email address")]
    public string EmailAddress { get; set; }

    [Required]
    [DataType(DataType.MultilineText)]
    public string Message { get; set; }
}

Here's the scripts (which I have confirmed loads correctly in the browser)

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

The rendered HTML looks like this (at initial page load):

<form action="/umbraco/Surface/ContactFormSurface/ContactForm" method="post" id="frmContact">
<div>
    <label>Full Name</label>
    <input type="text" value="" name="FullName" id="FullName" data-rule-required="true" data-msg-required="The Full Name field is required." class="input-validation-error">
    <span data-valmsg-replace="false" data-valmsg-for="FullName" class="field-validation-error">*</span>
</div>
<div>
    <label>Company</label>
    <input type="text" value="" name="Company" id="Company">
    <span data-valmsg-replace="false" data-valmsg-for="Company" class="field-validation-valid">*</span>
</div>
<div>
    <label>Email Address</label>
    <input type="text" value="" name="EmailAddress" id="EmailAddress" data-rule-required="true" data-rule-regex="{&quot;pattern&quot;:&quot;^(?!\\.)(\&quot;([^\&quot;\\r\\\\]|\\\\[\&quot;\\r\\\\])*\&quot;|([-a-z0-9!#$%&amp;'*+/=?^_`{|}~]|(?&lt;!\\.)\\.)*)(?&lt;!\\.)@[a-z0-9][\\w\\.-]*[a-z0-9]\\.[a-z][a-z\\.]*[a-z]$&quot;}" data-msg-required="The Email Address field is required." data-msg-regex="Not a valid email address" class="input-validation-error">
    <span data-valmsg-replace="false" data-valmsg-for="EmailAddress" class="field-validation-error">*</span>
</div>
<div>
    <label>Message <span data-valmsg-replace="false" data-valmsg-for="Message" class="field-validation-error">*</span></label>
    <textarea rows="10" name="Message" id="Message" data-rule-required="true" data-msg-required="The Message field is required." cols="30" class="input-validation-error input-xl"></textarea>
</div>
<div data-valmsg-summary="true" class="validation-summary-errors"><span>Please correct the following errors before submitting the message</span>
        <ul>
            <li>The Full Name field is required.</li>
            <li>The Email Address field is required.</li>
            <li>The Message field is required.</li>
        </ul>
    </div>
<div>
    <button type="submit">Send</button>
</div>
</form>

As you might see, the validation text is already at an invalid state at load time (before any keypresses or form submissions). Also, when I submit the empty form it submits back to the server, so client side validation doesn't actually happen. The jQuery validation scripts run, since the company field is not required and is reflected so in the validation message's class attribute ('field-validation-valid')

EDIT: Controller code as requested:

    public class ContactFormSurfaceController: Umbraco.Web.Mvc.SurfaceController
    {
        [HttpGet]
        public ActionResult ContactForm(ContactFormViewModel model)
        {
            return PartialView("ContactForm", new ContactFormViewModel());
        }
    }

Can anybody help me out here? Thanks in advance.

inspect your browser and let me know is there any error of javascript or jquery — Dilip Langhanoja
– Dilip Langhanoja, Commented Jan 10, 2014 at 11:38

John Reilly · Accepted Answer · 2014-12-17 15:42:56Z

4

With this new Native Unobtrusive validation, you seem to have to call .validate() on the form manually.

From the Date Demo Example:

$("form").validate({
    submitHandler: function (form) {
        alert("This is a valid form!")
    }
});

Or in simpler examples:

$("form").validate();

I have no experience with this, but since this only uses the jQuery Validation Plugin, the Documentation might be worth to read.

This WORKS with your generated HTML:

See these fiddles for reference:

http://jsfiddle.net/4JE62/

http://jsfiddle.net/4JE62/1/

edited Dec 17, 2014 at 15:42

John Reilly

6,3995 gold badges42 silver badges70 bronze badges

answered Jan 10, 2014 at 11:33

vinczemarton

8,2267 gold badges59 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

hofnarwillie Over a year ago

From the Unobtrusive Native website: "Oh, and remember that you no longer need to serve up the jquery.validate.unobtrusive.js on a screen where you are using jQuery Validation Unobtrusive Native." jqueryvalidationunobtrusivenative.azurewebsites.net/Home/…

heymega Over a year ago

@SoonDead I think these are alerady part of the jQuery.Validation.Unobtrusive.Native.MVC4 nuget package.

vinczemarton Over a year ago

HAHAHA true. I have no experience with Native, deleting my answer.

hofnarwillie Over a year ago

Got it! A combination of all of your helpful suggestions as well as changing the $("form").validate(); line to $("#formId").validate();. For some reason multiple forms on one page breaks this. jsfiddle.net/4JE62/3 Thanks for the help

John Reilly Over a year ago

Hi Guys, Just wanted to let you know that the documentation has migrated to GitHub pages now: johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native

|

Wolf · Accepted Answer · 2014-11-14 01:49:26Z

0

dont use validate(), use valid() instead

$("#frmId").valid()

Remember to include validate.unobtrusive.js in your page

answered Nov 14, 2014 at 1:49

Wolf

6,5372 gold badges32 silver badges28 bronze badges

3 Comments

hofnarwillie Over a year ago

No, the answer above solved it. validate.unobtrusive.js is not required when using Native Unobtrusive validation (as seen on their website and mentioned in OP). And validate() is the correct function (not valid()) it simply had an issue when there were two forms on the page, so my jQuery selector found them both, instead of just the one I'm trying to validate.

Wolf Over a year ago

I don't know, actually i go to this page because i try to solve my problems when call validate() and it don't work. and after that. i find solution and just want to share. May be my jquery is difference version with you

Mubashar Over a year ago

Actually its confusing just for others if someone is stopping the form on ajax call use the valid method and validate method must be called on document ready.

Collectives™ on Stack Overflow

MVC4: jQuery Validation Unobtrusive Native working incorrectly

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related