标签: unobtrusive-validation

我在ASP.NET MVC中使用jQuery的不显眼的验证插件.正确验证在服务器上呈现的任何字段.

但是,如果我使用JavaScript在表单中动态添加字段,即使它具有相应的HTML5 data-*属性,也不会验证它.

任何人都可以指导我如何实现这一目标吗？

我有一个管理页面,其中用户点击链接,然后使用Ajax 将PartialView包含Web表单的相应内容加载到Admin页面上的特定div中.

全部

"~/Scripts/jquery-2.0.3.js",
"~/Scripts/jquery.unobtrusive-ajax.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js"

在Admin页面中引用,并且在PartialView加载时,jQuery客户端验证将不起作用.

但是当我在其中引用这些脚本时PartialView,一切正常,但我不打算为每个脚本执行此操作,PartialView因为它们很多并且每次加载时,必须再次从服务器请求至少两个.js文件.

有没有办法在没有这个问题的情况下将这些脚本放在我的父(Admin)页面中？

我在ASP.net MVC 3中有以下视图:

@model Models.CreateProjectViewModel

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

@using( Html.BeginForm() ) {
    @Html.TextBoxFor(m => m.ProjectName)
    @Html.ValidationMessageFor(m => m.ProjectName)

    <p>
        <input type="submit" value="Save" />
    </p>
}

我正在使用不引人注目的javascript与jQuery和Fluent验证框架.

当我单击"保存"按钮并且验证失败时,是否有一些事件我可以挂钩调用一些自定义的JavaScript？

function validationFailed() {
    // do something here only if validation failed
}

我如何与验证绑定,以便在失败时(并且只有失败)我可以调用validationFailed()函数.

我的MVC应用程序生成以下HTML,导致提交时出现Javascript语法错误(我没有在两个文本框中键入任何内容).这是生成的HTML和提交处理程序:

<form action="/UrIntake/Save" id="UrIntakeForm" method="post">

    <input data-val="true" data-val-length="The field LastName must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The LastName field is required." id="FormSubmitter_LastName" name="FormSubmitter.LastName" type="text" value="" />
    <input data-val="true" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The FirstName field is required." id="FormSubmitter_FirstName" name="FormSubmitter.FirstName" type="text" value="" />

    <div id="SubmissionButtons" class="right">
            <input type="button" onclick="SubmitForm()" value="Submit" />
            <input type="button" onclick="CancelForm()" value="Cancel" />
    </div>
</form>

    function SubmitForm() {
        $("#UrIntakeForm").valid();
.
.
.

这是发生语法错误的jQuery代码(v1.9.0)."data"未定义,"return"行是发生错误的位置: …

我正在努力理解与ASP.NET MVC连接的jQuery验证的一些基础知识.

这个问题的简短版本是:我遗漏了哪些魔法允许@Html.EditorFor()执行jQuery验证所产生的代码,但不起作用我尝试使用完全相同的HTML连接我自己的jQuery验证？

作为一个学习练习(并且因为它模仿了我在网站上真正想做的事情),我在Visual Studio 2012中创建了一个新的MVC 4应用程序.我添加了一个视图模型:

using System.ComponentModel.DataAnnotations;
namespace ValidationTest.Models
{
    public class MyViewModel
    {
        [Required]
        public string MyStringValue { get; set; }
    }
}

我修改了Views\Home\Index.cshtml来创建一个基于我的视图模型的表单,如下所示:

@model ValidationTest.Models.MyViewModel
@using (Html.BeginForm(new { id = "MyForm" })) {
    @Html.LabelFor(m => m.MyStringValue)
    @Html.EditorFor(m => m.MyStringValue)
    @Html.ValidationMessageFor(m => m.MyStringValue)

    <br />
    <input type="submit" value="Submit" />
}

最后,我修改了Home控制器,将视图模型提供给表单并处理相关的POST,如下所示:

using System.Web;
using System.Web.Mvc;
using ValidationTest.Models;

namespace ValidationTest.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var viewModel = new …

我的模型有一个值,它必须在我的模型上的两个其他值的范围内.

例如:

public class RangeValidationSampleModel
{
    int Value { get; set; }

    int MinValue { get; set; }

    int MaxValue { get; set; }
}

当然,我不能将这些Min/MaxValues传递给我的DataAnnotations属性,因为它们必须是常量值.

我确定我需要构建自己的验证属性,但是我没有这么做,也无法理解它应该如何工作.

我已经搜索了大约一个小时,并且已经看到了各种用于构建自定义验证的解决方案,但是使用MVC3不显眼的验证找不到任何解决这个特定问题的方法.

我正在使用MVC3进行不显眼的验证.我有一个字段,用户需要填写一些数据,然后按"搜索"按钮.如果从未按下搜索或用户在按搜索后更改了输入字段,则无法提交表单.

我添加了一个隐藏字段,该字段true由click()按钮事件设置,并由keyup()输入框的事件清空.现在我想添加一个验证规则,要求隐藏字段true允许提交.

我希望使用不显眼的验证,但是如果这不起作用,那么需要一些javascript的东西是可以的,只要它不会破坏对表格其余部分的不显眼的验证.

在我添加之前,以下代码片段完全符合我的要求type="hidden".

<input class="required" id="client-searched" data-val="true" 
  name="ClientSearched" data-val-required="Press search!"/>
<span class="field-validation-valid" data-valmsg-replace="true" 
  data-valmsg-for="ClientSearched"/>

我在页面上有两个单独的字段:一个用于日期,一个用于时间.

这是模型:

[Required]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
public DateTime? StartTime { get; set; }

[Required]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
public DateTime Date { get; set; }

这是观点:

@Html.TextBoxFor(m => m.Date, "{0:MM/dd/yyyy}", new { type = "text" })
@Html.TextBoxFor(m => m.StartTime, "{0:hh:mm tt}", new { type = "text", id = "timeStart" })

javascript不引人注目的验证适用于该Date字段,但是当我在StartTime验证节目中输入"11:00 PM"或"11:00 pm"时

"StartTime字段必须是日期"

服务器端验证工作正常,"0:hh:mm tt"它只是有问题的JavaScript.现在我只是禁用了javascript验证,但最终会在这个页面上有它

这可以在"时间"字段中完成吗？

我目前正在使用Twitter Bootstrap模态组件,我有一个问题,我在使用data-remote属性远程加载的内容中的输入字段上使用jquery验证插件.

因为在遍及dom的jquery验证之后加载了内容,所以对于新加载的元素不会进行验证.

我有一个解决方案,我修改bootstrap.js(模态类),见下文.

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
    //this.options.remote && this.$element.find('.modal-body').load(this.options.remote)

    this.options.remote && this.$element.find('.modal-body').load(this.options.remote, $.proxy(function () {
        this.$element.trigger('loaded')
    }, this)) //my additions
  }

我在加载外部html片段的调用中触发'loaded'事件.

我已经连接了这个事件,我在新加载的元素上调用验证.

$('#myModal').on('loaded', function () {
                $.validator.unobtrusive.parse($(this));
            });

我的问题是我必须修改bootstrap.js才能实现这一点,有没有办法让我在外部工作而不修改bootstrap.js？有没有办法访问页面上的模态对象并将'loaded'事件附加到它？我想在外部脚本或页面内执行此操作,因此我不需要担心引导版本.

我的表单具有默认帮助文本的输入,用于指导用户输入的内容(而不是使用标签).这使验证变得棘手,因为输入值永远不为空.

如何扩展不显眼的验证来处理这个问题？如果姓名输入等于"请输入您的姓名......",则表单无效.

我开始阅读Brad Wilson关于验证适配器的博客文章,但我不确定这是否是正确的方法？我需要能够根据字段验证不同的默认值.

谢谢