0

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?

Community
  • 1
  • 1
learning...
  • 3,104
  • 10
  • 58
  • 96

3 Answers3

0

I would think you would need to do this:

[MetadataType(typeof(AnnualReportMessage.AnnualReportMessageMetaData))]

Do you by any chance have a different AnnualReportMessageMetaData class?

Erik Funkenbusch
  • 92,674
  • 28
  • 195
  • 291
  • No. I have changed it to public but still the same affect. Also, i am now excluding 2 items. When i look at the rendered html, fice and AnnualReportYear have the value but these post as null and 0. [MetadataType(typeof(AnnualReportMessageMetaData))] public partial class AnnualReportMessage { [Bind(Exclude = "AnnualReportYear,Fice")] public class AnnualReportMessageMetaData { [Required(ErrorMessage = "Message cannot be empty")] public string Message { get; set; } } } – learning... Apr 23 '12 at 23:10
  • I have made the metadata change and also made the nested metadata class public but it still doing the same thing. One more thing that i am now confused is 1. why i am getting required with the second hidden field. 2. the items that are bind exclude, one is getting rendered as not required where as other is rendered as required. 3. On the posted form, Message_Fice is null and MEssage_AnnualReportYear is 0 where as both of these have values. – learning... Apr 23 '12 at 23:26
  • [MetadataType(typeof(AnnualReportMessage.AnnualReportMessageMetaData))] public partial class AnnualReportMessage { [Bind(Exclude = "AnnualReportYear,Fice")] public class AnnualReportMessageMetaData { [Required(ErrorMessage = "Message cannot be empty")] public string Message { get; set; } } } – learning... Apr 23 '12 at 23:28
  • FireFox is behaving normally, it is IE 8 that is having the issues. FF is still having the hidden fields Message_Fice and Message_AnnualReportYear not being passed properly problem. Validation is ok in FF. – learning... Apr 23 '12 at 23:35
0

Use this. It will remove default validate method in mvc 3 razor.

 $(document).ready(function () {
   var form = $('#formId').get(0);
   $.removeData(form, 'validator');
 });

then ur jquery validation code will work

yogeswaran K
  • 2,278
  • 8
  • 29
  • 45
0

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;
            });
        },
learning...
  • 3,104
  • 10
  • 58
  • 96