Question

My form posts to the action even when the textarea is blank. On the post action, i get this as null.

Also, i have a DI, repository and service architecture.

I have followed the following and still no luck.

MVC3 client validation not working

Here is what i have so far:

Business Entity

namespace Intranet.BusinessEntities
{
    public partial class AnnualReportMessage
    {
        public string Message { get; set; }   
        public int AnnualReportYear { get; set; }
        public string Fice { get; set; }
    }
}

**Following is in Validations Folder**

using System.ComponentModel.DataAnnotations;

namespace Intranet.BusinessEntities
{
    [MetadataType(typeof(AnnualReportMessageMetaData))]
    public partial class AnnualReportMessage
    {
        private class AnnualReportMessageMetaData
        {
            [Required]
            public string Message { get; set; }
        }
    }
}

Following 2 are referenced in the layout

<script type="text/javascript" src="@Url.Script("jqueryMain/jquery.validate.js")"></script>
<script type="text/javascript" src="@Url.Script("jqueryMain/jquery.validate.unobtrusive.min.js")"></script>

Wen.config (in global, not area specific)

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

HTML on Page, i have only made “Message” required, why i am seeing validations for other fields?

<form action="/Sales/AnnualReportNote" id="AnnualReportMessage" method="post">
    <input name="__RequestVerificationToken" type="hidden" value="Q65zfJU+oSODE+qLj0Q0UpfaTId+ENEr+jucyhjWLbk1gnxY0QuTpu7R/lYOGtSxOYJwQkiPryCzgiTekyGikT/YrLQjF6hZXBhKkSF+UVzeAX2PuDrRoJR0pmWf5thL05LlAidHJtRcC3SHHGbxce5dqHSd1zIFpdQfQ3HPu10eUh55jMD4bn0cZeLReJ4P" />
    <input id="Fice" name="Fice" type="hidden" value="XXXXXX" />
    <input data-val="true" data-val-number="The field SetupYear must be a number." data-val-required="The SetupYear field is required." id="SetupYear" name="SetupYear" type="hidden" value="2012" />
    <input data-val="true" data-val-number="The field AnnualReportYear must be a number." data-val-required="The AnnualReportYear field is required." id="Message_AnnualReportYear" name="Message.AnnualReportYear" type="hidden" value="2012" />
    <input id="Message_Fice" name="Message.Fice" type="hidden" value="XXXXXX" />

    <textarea cols="70" data-val="true" data-val-required="The Message field is required." id="Message_Message" name="Message.Message" rows="12">
    </textarea>    

    <div class="distanceBottom"><span class="field-validation-valid" data-valmsg-for="Message.Message" data-valmsg-replace="true"></span></div>

    <input type="image" src="/App_Themes/Main/Images/ResponseAction/Buttons/btn_submit.gif" class="distanceTop" alt="Submit" id="SubmitButton" />
</form>

JavaScript

formSubmit: function ($form, currentForm) {
        if ($form.validate().form()) {
            var $button = $("#" + AnnualReportSpecialEcMessage.enums.submitButtonId);

            jMessage("Processing request...", $button, true, false);
            $.ajax({
                cache: false,
                url: currentForm.action,
                type: currentForm.method,
                data: $form.serialize(),
                error: function (xhr, ajaxOptions, thrownError) {
                    jMessageError(xhr.responseText, $button, false, true);
                },
                success: function (result) {
                    if (result.IsError) {
                        jMessageError(result.Message, $button, false, true);
                    }
                    else {
                        jMessageOK(result.Message, $button, false, false);
                        jMessageHideInterval(3000); //hide after 3 seconds
                    }
                }
            });
        }
    }

Am i missing something here?

Answer 1

It was jquery.validate.js that had an issue. Either get the latest one or

Replace

return $([]).add(this.currentForm.elements)
.filter(":input")

With

return $(':input', this.currentForm)

Full working piece

elements: function() {
            var validator = this,
                rulesCache = {};

            // select all valid inputs inside the form (no submit or reset buttons)
            // workaround $Query([]).add until http://dev.jquery.com/ticket/2114 is solved
            //return $([]).add(this.currentForm.elements)
            //.filter(":input")
            return $(':input', this.currentForm)
            .not(":submit, :reset, :image, [disabled]")
            .not( this.settings.ignore )
            .filter(function() {
                !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);

                // select only the first element for each name, and only those with rules specified
                if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
                    return false;

                rulesCache[this.name] = true;
                return true;
            });
        },