Custom Editor template based on ViewModel Dataannotation attribute MVC4

Question

What I want to do is automatically add an image span after my input textboxes if the [Required] attribute decorates my ViewModel property be it an integer, double, string, date etc

For example, my ViewModel might look like

public class MyViewModel 
{
    [Required]
    public string  Name { get; set; }
}

and my View would look like

@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)

and the output would be something like

<input id="Name" class="text-box single-line" type="text" value="" name="Name" data-val-required="The Name field is required." data-val-length-max="20" data-val-length="The field Name must be a string with a maximum length of 20." data-val="true">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Name"></span>

-- Note the automatically added span
<span class="indicator required" style="width: 11px;"></span>

I was intending to have some css that would show the image i.e.

span.required {
    background-image: url("required.png");
}

Is this possible to do or do I need to create my own Helper method to implement this type of functionality?

Answer 1

Yes, it's possible, but in general I wouldn't recommend it, because templates are really there to customize type rendering, and you should be able to create templates without worrying if it overrides another template.

I would instead create a custom LabelFor helper, such as the one described here:

http://weblogs.asp.net/imranbaloch/archive/2010/07/03/asp-net-mvc-labelfor-helper-with-htmlattributes.aspx

or here:

http://weblogs.asp.net/raduenuca/archive/2011/02/17/asp-net-mvc-display-visual-hints-for-the-required-fields-in-your-model.aspx

A third option is to not do anything in MVC, but rather add some javascript that will add the indicator based on the standard MVC validation data attributes (if you're using unobtrusive validation). See the answer here:

https://stackoverflow.com/a/8524547/61164

Answer 2

What I did was to modify the jquery.validate.unobtrusive JS file to add a second container, specifically for your images, if there is a validation error.

var container2 = $(this).find("[data-valimg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replace = $.parseJSON(container.attr("data-valimg-replace")) !== false;

    container2.removeClass("img-validation-valid").addClass("img-validation-error");

Then don't forget to bind it to the model:

error.data("unobtrusiveContainer", container2);

Finally, empty it in the if (replace) code block:

if (replace) {
        container.empty();
        container2.empty();
        error.removeClass("input-validation-error").appendTo(container);            
    }
    else {
        error.hide();
    }

On success, remember to hide it:

var container2 = error.data("unobtrusiveContainer"),
        replace = $.parseJSON(container.attr("data-valimg-replace"));

    if (container2) {
        container2.addClass("img-validation-valid").removeClass("img-validation-error");
        error.removeData("unobtrusiveContainer");

        if (replace) {
            container2.empty();
        }
    }

If you take a look at the onError and onSuccess functions in the file, you should be able to find out where you can put them in.

In your view, add the following line of code to each form input there's validation for:

<img class="img-validation-valid" data-valimg-replace="true" data-valimg-for="<replace with field name here, ie. Name>" src="required.png" />

I've only tested this with the [Required] attribute, but it works. I'm also pretty sure you can use this for generating other stuff as well, not just images.