【问题标题】:Client-side validation not working in Mvc客户端验证在 Mvc 中不起作用
【发布时间】:2014-11-03 21:12:04
【问题描述】:
public class property
{
    public int Id { get; set; }
    public string UserId { get; set; }

    [Required(ErrorMessage = "Enter your name")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Enter your Email")]
    public string Email { get; set; }
    public string PostedBy { get; set; }

    [Required(ErrorMessage = "Enter the mobile no")]
    public Int64 Mobile { get; set; }
}

以下是需要进行验证的cshtml页面。

@model Property.Models.property


      @ {  ViewBag.Title = "Create";
        Layout = "~/Views/Shared/_UserProperty.cshtml"; }


<h2>Post Property</h2>
        @using (Html.BeginForm("Create", "Listings", FormMethod.Post, new { enctype = "multipart/form-data" }))
{    

    @Html.ValidationSummary(true)

    <fieldset>
        <article class="bs-docs-social-body">
            <section class="container">
                <div class="form-box-container">
                    <div class="form-box-left">
                        <h5>* Name :</h5>
                         @*@Html.EditorFor(model => model.Name)*@
                         @Html.Editor("Name", @ViewData["Name"])
                         @Html.ValidationMessageFor(model => model.Name)
                        <br>
                        <input type="radio" class="postedby" name="postedby" id="Builder" value="Builder" /> I am the Builder
             <input type="radio" class="postedby" name="postedby" id="Agent" value="Agent" /> I am the Agent
             <input type="radio" class="postedby" name="postedby" id="Owner" value="Owner" /> I am the Owner

                    </div>
                    <div class="form-box-right">
                        <h5>* Email Address :</h5>
                         @*@Html.EditorFor(model => model.Email)*@
                         @Html.Editor("Email", @ViewData["Email"])
                         @Html.ValidationMessageFor(model => model.Email)

                    </div>
                </div>
                <div class="form-box-container">
                    <div class="form-box-left">
                        <h5>* Mobile No :</h5>
                        <select class="drop-item">
                            <option>India (+91)</option>
                        </select>
                        @*<input type="text" name="Mobile" onkeypress="CheckNumeric(event);" maxlength="10" />*@
                        @Html.Editor("Mobile", @ViewData["Mobile"])
                        @Html.ValidationMessageFor(model => model.Mobile)
                        <br>
                    </div>

                <div class="form-box-container">

                    <input type="submit" name="Post" value="Post" class="btm-bg" />

                </div>
            </section>
        </article>
    </fieldset>
}

<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

我不知道问题出在哪里。我已经更改了所需消息的模型,但仍然没有发生任何更改,并且在提交发布按钮时,在没有客户端验证的情况下回发。

【问题讨论】:

  • 你是否也包含 jquery.js 文件..??
  • 嗨 Karthikeya.. 是的,我已将它们包括在内.. 请参阅更新后的问题
  • 先添加jquery,再添加验证脚本。同样在您的 web.config 应用程序设置中,您是否有 ?跨度>
  • @SSA - 我之前做过 jquery > validate.min.js> unobtrusive.min.js - 然后我的 jquery 不工作了。然后我将其更改为 validate.js 和 unobtrusive.js 然后 jquery 再次开始工作,但页面仍在回发。
  • 是的,它们很重要,因为如果你不使用MVC html helpers,验证所需的数据标签将不会添加到它们上面,那么你需要手动添加它们。

标签: jquery asp.net asp.net-mvc-3 asp.net-mvc-4


【解决方案1】:

试试这个你的js调用序列

 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
 <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

【讨论】:

  • 我应该在逻辑中添加什么来保存?我的意思是提交按钮自己获取所有值。
  • @Smokingmonkey 尝试更改 js 文件 validate.min.js 和 jquery.js 的顺序。同时在 chrome 中按 F12 后检查是否有任何错误
  • @Smokingmonkey 请再次检查答案,我为您编辑。
  • 我无法加载 ..min.js 文件。它导致我的页面不运行 jquery。是吗
  • 是的,就是这样。在重新排列 js 文件后,我已经在我这边尝试了你的整个代码它在我这边工作正常。请尝试确保你的 js 路径是正确的。
猜你喜欢
  • 2011-12-19
  • 2013-01-09
  • 2014-03-25
  • 2014-08-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多