如何使用jQuery验证器与MVC 3显示自定义图像

时间:2011-05-16 01:44:40

标签: jquery html asp.net-mvc-3 jquery-validate

我正在使用MVC应用程序,尝试使用自定义图像(输入有效时选中标记,以及显示信息是否无效的“x”)。

插件的文档可以在http://docs.jquery.com/Plugins/Validation/看到。他们有一些很好的例子,甚至还有一些演示应用程序设置。

我可以按照此处给出的示例http://docs.jquery.com/Plugins/Validation/validate#toptions(向下滚动到“添加类”有效“到有效元素,通过CSS设置样式)。如果我使用普通的html页面,这可以正常工作在MVC中遵循这一点我遇到了问题,我无法找到原因。

我的脚本如下:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("input").validate({
            success: "valid",
            submitHandler: function () { alert("Submitted!") }
        })
    })    
</script>

在我的Site.css中

label.valid
{
    background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif')    no-repeat;
    height:16px;
    width:16px;
    display: block;
    position: absolute;
    top: 4px;   
    left: 152px;
}

在我看来

<div class="smallError" align="center">
       @Html.ValidationMessageFor(model => model.GiftCode)
</div>
<div align="center">
       @Html.EditorFor(m => m.GiftCode)
</div>

现在,我可以显示ValidationMessageFor,并显示相应的消息..但是如果图像有效,我无法显示我的复选标记。

是否有更简单的方法可以与已经完成的验证相结合?

问候。

1 个答案:

答案 0 :(得分:0)

对于有兴趣解决此问题的任何人,请在本地复制使用的文件。

例如,在插件的文档中,它希望您访问如下脚本:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" 
 src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js">
</script>

但是,在MVC中,它们引用文件的方式不起作用。尝试访问脚本和关联的图像文件时,它会给您一个禁止的403错误。

要解决此问题,只需在本地下载脚本并将其放在解决方案资源管理器中的脚本文件夹中。

我希望将来能节省一些时间,因为这是此处提供示例的唯一问题:http://docs.jquery.com/Plugins/Validation/validate#toptions