How to use jQuery validator with MVC 3 to display custom images

I am working in an MVC application, attempting to use custom images (check mark when the input is valid, and an "x" to show if the information is invalid).

The documentation for the plugin can be seen here http://docs.jquery.com/Plugins/Validation/. They have some good examples, and even some demo applications setup as well.

I can follow the example given here http://docs.jquery.com/Plugins/Validation/validate#toptions (scroll down to "Add a class "valid" to valid elements, styled via CSS). This works properly if I use a plain html page, however, when attempting to follow this in MVC I am running into issues and I can't specifically find the reason.

My script looks like:

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

In my 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;
}

In my view

<div class="smallError" align="center">
       @Html.ValidationMessageFor(model => model.GiftCode)
</div>
<div align="center">
       @Html.EditorFor(m => m.GiftCode)
<开发者_JAVA百科;/div>

Now, I can get the ValidationMessageFor to appear, and show the appropriate message.. however I cannot get it to display my check mark if the image is valid.

Is there any easier way to tie into the validation that is already being done?

Regards.

For anyone interested in the resolution of this problem, please copy the files locally that are used.

For example, in the documentation of the plug-in, it wants you to access the scripts like:

<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>

However, in MVC the way they are referencing the files won't work. It will give you a forbidden 403 error when attempting to access the script and the associated image file.

To combat this simply download the script locally and place it inside of the scripts folder in your solution explorer.

I hope this saves somebody some time in the future as this was the only issue with the example provided here: http://docs.jquery.com/Plugins/Validation/validate#toptions .