CODEWITHSUNDEEP
c#jqueryasp.net-mvcunobtrusive-validation
Coder0997
Coder0997

Reputation: 232

Data validations not working in MVC4 website

I have model created with data annotations and in the partial view form when I click on submit client side validations does not work and form gets posted to the server. I am breaking my head over this from last couple of days. Following is the head section in _Layout.cshtml where I have included all the scripts

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    <link href="~/Images/yellowtribe3.png" rel="shortcut icon" type="image/x-icon" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/YellowTribes.css")" rel="stylesheet" type="text/css" />        
    <link href="@Url.Content("~/Content/menu3.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/rateit.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/shCore.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/shThemeDefault.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/prettify.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/rateit.css")" rel="stylesheet" type="text/css" />
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>


    <meta name="viewport" content="width=device-width" />

    @System.Web.Optimization.Scripts.Render("~/bundles/jquery")

    @System.Web.Optimization.Scripts.Render("~/bundles/jquery")

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = true;
            $.extend($.mobile, { ajaxFormsEnabled: true });
        });
    </script>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>

And following is the partial view code where I have inputs 

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left">
    <tr>
        <td align="right" width="15%">
            <div>Name:</div> 
        </td>

        <td align="left"> 
            <div class="input200">
                <div class="input200">@Html.EditorFor(x => x.Name, new { @maxlength = "25" })</div> 
            </div> 
        </td>
    </tr>
    <tr>
        <td align="right" valign="top">
            <div>Comment:</div> 
        </td>
        <td align="left"> 
            <div>@Html.TextAreaFor(x => x.CommentText, 5, 50, null)</div> 
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            @Html.Raw(Html.GenerateCaptcha())
            @Html.ValidationMessage("recaptcha")
        </td>
    </tr>
    <tr>
        <td align="right">
        </td>
        <td align="left"> 
                <input id="ArticleID" name="ArticleID" type="hidden" value="@ViewData["ArticleID"].ToString()" />
            <input class="actionButtons" type="submit" value="Submit" onclick="validateInput();" formmethod="post"/> 
            <div id="thanksMsg" style="display:none; color:Red;">
                <b>Thank you for your comment...</b>
            </div>      
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <br /> <br />
        </td>
    </tr>


</table>

If I view the source of my web page it seems to look fine with validations

                <div class="input200"><input class="text-box single-line" data-val="true" data-val-required="Please enter your name" id="Name" name="Name" type="text" value="" /></div> 
            </div> 

            <div><textarea cols="50" data-val="true" data-val-required="Please enter comments" id="CommentText" name="CommentText" rows="5">

Not sure why it just won't validate when I leave these fields empty. Any help greatly appreciated.

Upvotes: 1

Views: 173

Answers (2)

Coder0997
Coder0997

Reputation: 232

I finally found the issue. The problem was with the way I have included javascripts scripts. I changed following order from 

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>

To

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Upvotes: 1

Chris Schumann
Chris Schumann

Reputation: 156

Can you post your model code?

I did something really silly the other day that kept me stuck for a little while, I hadn't declared my properties correctly, I just created public strings instead of a property with a set and get method. Everything worked just fine when using the model except for the model binding and validation. It was driving me nuts, maybe you've made the same mistake?

Upvotes: 0

Related Questions