标签: unobtrusive-validation

我已经搜索了很长一段时间,但未能找到答案.

我正在使用asp.net MVC 3进行不显眼的验证.我的模型与数据注释绑定,用于简单验证(必填字段,正则表达式等).但是,我在服务器上进行了更复杂的验证.我正在做一个ajax帖子,它返回来自我的域模型的验证add'l消息.我想要做的就是将表单上的验证消息放在现有表单的位置.我不想使用部分视图,因为我真正得到的是消息回来,并且不需要刷新整个视图.另外,我没有在表单中添加新规则或新输入,因此$ .validator.unobtrusive.parse将无效.这些只是我想要放在表单上的消息.$ .post调用返回一个消息列表,该字段受影响的字段和验证消息.

这就是我想要做的事情

 $.post(url, { someData}, function (data) {
         for (message in data.Messages) {
             $("#form").validate().addMessage(message.Field, message.Text);
         }
    });

谢谢你的帮助

根据请求,这里是返回JSON的示例,它非常简单.

{"id":0,"messages":["Level":0,"Message":"Style is required","Name":"Style"}],"operationResult":false}

messages是包含严重性级别,错误所属属性和错误消息的对象列表.我将使用messages对象中的名称来匹配表单上的所需位置.

我在用 ASP.NET 5 MVC RC1

我的ASP.NET MVC使用的jquery验证插件是默认的ASP.NET 5模板项目使用的标准jquery.validate.js.

 /*!
 * jQuery Validation Plugin v1.14.0
 *
 * http://jqueryvalidation.org/
 *
 * Copyright (c) 2015 Jörn Zaefferer
 * Released under the MIT license
 */

和jquery.validation.unobtrusive.js

/*!
** Unobtrusive validation support library for jQuery and jQuery Validate
** Copyright (C) Microsoft Corporation. All rights reserved.
*/

我在下面提供了一个简单的必填字段示例来演示我的问题.

视图模型:

public class TierImportStatusUpdateViewModel
{
    [Required]
    public string String1 { get; set; }
    [Required]
    public string String2 { get; set; }
    //more fields
}

CSHTML:

@model  MyViewModel …

我们为TinyMCE提供了一个内部开发的文件/图像/文档管理器插件,该插件仍然被移植到jQuery.与此同时,我们的一些依赖于这些功能的项目需要使用基于Prototype的TinyMCE和jQuery.noConflict()版本.这样可以正常工作,但是在ASP.NET MVC 3中进行不显眼的验证时,提交的验证发生在TinyMCE回调之前,将TinyMCE的内容复制到表单字段被触发.是否可以在不显眼的验证中挂钩预验证事件？

我已经设置了一个局部视图,其中包含自己的表单标记,如下所示:

<tr>
    @using (Html.BeginForm("Create"))
 {
        <td>
            @Html.TextBoxFor(model => model.Date)
            @Html.ValidationMessageFor(model => model.Date)
        </td>
        <td>
            @Html.TextBoxFor(model => model.Amount)
            @Html.ValidationMessageFor(model => model.Amount)
        </td>
        <td>
            @Html.TextBoxFor(model => model.Tags)
            @Html.ValidationMessageFor(model => model.Tags)
        </td>
        <td>
            @Html.EnumDropDownListFor(model => model.Type)
        </td>
        <td>
            <input type="submit" value="Add" />
            @Html.ValidationSummary(true)
        </td>
 }
</tr>

我使用@ Html.Action("Create")在页面上渲染它(它是表格的一部分,因此是<tr>标签.

由于一些奇怪的原因,我的客户端验证不起作用,我首先看到发布时的错误.

部分视图和客户端验证有什么特别之处吗？

我已经包含以下脚本:

<script src="/Scripts/jquery.1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

编辑

我只是试着把这个脚本扔到页面上:

jQuery('form').submit(function ()
{
    alert(jQuery(this).valid());
});

它警告'true',因此客户端验证脚本肯定存在,并且由于某种原因它不检查有问题的字段: - /

编辑2

我已将页面的整个源代码(HTML + JS)上传到pastebin:http://pastebin.com/GvqLW495

我有这个代码在提交表单时触发:

$("form").submit(function (e) {
    var geocoder = new google.maps.Geocoder();
    var address = document.getElementById("Address").value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("#LatitudeLongitude").val(results[0].geometry.location);
            $("form").submit();
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    $('form').unbind('submit');
    return false;
});

它的作用:它调用谷歌地理编码服务将地址转换为纬度/经度,该纬度/经度被设置为表单的隐藏字段.如果有结果,则提交表单.

问题是如果验证失败(例如,尚未设置必填字段),则仍会进行地理编码调用.此外,如果我在提交按钮上再次单击,即使尚未设置必填字段,也会发布表单.

如果不引人注目的验证成功,我该如何调用地理编码服务？

我试图解决这样一个事实:当他们编写asp.net MVC 3时,他们忘记包含代码来添加不显眼的验证属性到选择列表,他们的"修复"就是将它包含在MVC 4中,这不是血腥的使用MVC 3的任何人.

我建议的解决方法是使用Html.GetUnobtrusiveValidationAttributes()自己添加它们,就像任何其他自定义属性一样,但我无法确定调用方法的正确语法.有2个重载,一个接受一个字符串,另一个接受一个字符串和一个ModelMetaData类.我理解元数据参数,我认为我只是传入ViewData.ModelMetadata但字符串应该是什么？MSDN文档说它是"指定的HTML名称属性",这对我来说毫无意义.HTML名称属性是什么？选择清单？为什么它需要它以及它如何帮助它知道我的模型上我想要验证的属性？查看使用示例,他们似乎都传递了我的模型上属性的名称,我想要验证属性,这是有道理的.不幸的是,无论我传递什么,我都无法让方法返回任何空集合.

我的模型类叫做Event,我的属性叫做EventTypeID.我使用稍微不同的viewmodel类作为视图的基础,因为我需要显示事件列表,并且还允许在同一视图上输入新事件,因此我有一个简单的viewmodel类,如下所示:

public class EventViewModel
{
    public Model.Event NewEvent { get; set; }
    public IEnumerable<Model.Event> Events { get; set; }
}

下拉列表映射到属性,如:@Html.DropDownListFor(model => model.NewEvent.EventTypeID我将作为字符串传递给Html.GetUnobtrusiveValidationAttributes(string)或Html.GetUnobtrusiveValidationAttributes(string, ModelMetadata)获取此属性的属性.我试过了:

Html.GetUnobtrusiveValidationAttributes("EventTypeID")
Html.GetUnobtrusiveValidationAttributes("EventTypeID",ViewData.ModelMetadata)
Html.GetUnobtrusiveValidationAttributes("NewEvent.EventTypeID")
Html.GetUnobtrusiveValidationAttributes("NewEvent.EventTypeID",ModelMetadata)

他们都返回一个空集合.

我知道我的模型是正确的,因为如果我将调用更改Html.DropDownListFor为Html.TextBoxFor然后验证"正常工作",除了将验证属性添加到我的模型类之外,我不需要做任何事情.

编辑:

刚尝试关闭客户端验证,验证在所有选择列表的服务器端都很好.

我有MVC3应用程序,不引人注目的验证在FireFox中工作正常,但在IE中不起作用.

有什么想法吗？

UPDATE

似乎MVC3附带的jQuery不显眼验证库与我正在使用的jQuery 1.7.1(与引导模板一起提供)不完全兼容.在Firefox中工作,不适用于IE 8(我拥有的).

我开始将jQuery升级到它开始工作的版本(不确定是否其他东西不会破坏!).

当我达到1.8.1时,它终于奏效了.

我继续升级jQuery,当我到达1.9.1时 - 该死的东西再次停止工作:)

使用MVC3 jQuery不显眼验证的最新jQuery版本是1.8.3.

看起来这也是最新的jQuery版本,与MVC3 jQuery unobtrusive ajax库配合使用.

PS人们使用MVC3不引人注意的验证或ajax,不要使用高于v 1.8.3的jQuery.

我有一个ASP.NET MVC 4应用程序,它使用jQuery.validation.js插件和MVC的jQuery.validation.unobtrusive.js.我在视图模型上使用数据注释来验证文本框的输入是否为整数.

使用...在父视图中加载此(嵌套)视图

<% Html.RenderPartial("New"); %>

第一个初始页面加载,客户端验证工作.但是任何使用ajax调用重新加载嵌套视图,客户端验证都不再有效.这是为什么？

更新 :(来自webdeveloper解决方案的代码示例)

$.validator.unobtrusive.parse($('form'));

例:

var saveAndUpdate = function (url) {
    var myForm = $('form', $('#TheDivThatContainsTheNewHTML'));
    $.ajax({
        url: url,
        type: 'POST',
        data: myForm.serialize(),
        success: function (result) {
            $('#TheDivThatContainsTheNewHTML').html(result);
            $.validator.unobtrusive.parse($('#TheDivThatContainsTheNewHTML'));          
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        },
        dataType: 'html'
    });
}

当我使用ajax提交包含带有"maxlength"属性的文本字段的表单时,出现javascript错误: Uncaught SyntaxError: Unexpected token u (jquery-1.9.1.min.js:3)

如果我删除maxlength属性一切正常.

我的HTML,将我的页面剥离到最低限度以复制问题:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

        <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    </head>
    <body>
        <form action="#" data-ajax="true" id="form0" method="post">
             <input id="deposit" name="numberValue" type="text" class="despositInput" maxlength="8" value="1000">
             <input type="submit" value="go">
        </form>    
    </body>
</html>

无法弄清楚我做错了什么 - 也许Visual Studio模板提供的jquery脚本是不兼容的？我很感激任何帮助,谢谢.

我有一种情况,当我尝试检查表单是否有效,但form.valid()始终返回true.但是,如果我尝试验证单个控件,则返回false.

这是我的表格:

<div class="profilestagsedit">
    @using (Html.BeginForm("", "", FormMethod.Post, new { id = "tagsform" }))
    {
        @Html.ValidationMessageFor(x => x.EditTagsText)
        @Html.TextBoxFor(p => p.EditTagsText, new
           {
               @id = "txtprofileedittags"
           })
    }
</div>

这是我的viewmodel:

[Required(AllowEmptyStrings = false, ErrorMessage = "Please enter at least one Tag ")]
public string EditTagsText { get; set; }

这是jQuery代码:

   $('#tagsform').removeData("validator");
   $('#tagsform').removeData("unobtrusiveValidation");
   $.validator.unobtrusive.parse('#tagsform');
   $('#tagsform').validate();

在保存按钮上单击:

var isValid = $('#tagsform').validate().element($('#txtprofileedittags')); <-- false
$('#tagsform').valid() true <--

我想form.valid()也返回false,我做错了什么？