9

For fields in my ASP.NET MVC view that have been attributed as required, is there any way for the framework to render some sort of indicator automatically that the field is marked as required in metadata?

6 Answers 6

15

Should be able to do this with CSS since MVC3 adds in those custom attributes to the element:

 <input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" value="" />

You could key off the data-val-required in CSS like so:

input[data-val-required] { background:red } or set a background image of an asterisk etc.

3
  • It only adds it with javascript. Commented Apr 12, 2011 at 7:22
  • Just found this useful as well.
    – KTF
    Commented Apr 21, 2011 at 3:03
  • Very clever, I love answers like this Commented Sep 12, 2013 at 15:46
13

I did that way because my required fields must be dynamic (defined in a configuration file)

Add at the end of your View:

    <script type="text/javascript">
        $('input[type=text]').each(function () {
            var req = $(this).attr('data-val-required');
            if (undefined != req) {
                var label = $('label[for="' + $(this).attr('id') + '"]');
                var text = label.text();
                if (text.length > 0) {
                    label.append('<span style="color:red"> *</span>');
                }
            }
        });
    </script>
1
  • Awesome-sauce. This works great--thanks! See my comment below for an expansion that includes more field types.
    – Mark
    Commented Sep 22, 2014 at 18:02
5

I modified Renato Saito's answer to include more field types (all types of input and select lists) and use the jQuery namespace instead of the generic $. Here is my revision:

<script type="text/javascript">
// add indicator to required fields
jQuery('input,select').each(function () {
    var req = jQuery(this).attr('data-val-required');
    if (undefined != req) {
        var label = jQuery('label[for="' + jQuery(this).attr('id') + '"]');
        var text = label.text();
        if (text.length > 0) {
            label.append('<span style="color:red"> *</span>');
        }
    }
});
</script>
4

Here is one that will attach a red asterisk to the right side of anything with the attribute 'data-val-required'.

<script type="text/javascript">
    $('[data-val-required]').after('<span style="color:red; font-size: 20px; vertical-align: middle;"> *</span>');
</script>
1

Adding html attribute is not enough. This will only cause javascript validation error. If you want to indicate that the field is required you'd probaly want to add an asterisk to it. You can do it by means of extenssion method of HtmlHelper. You can find a thorough explanation here

Indicating required field in MVC application

0

A Small Modification Is Done From My Side. Actually I had primary keys (Identity Columns in DB). That I did no want to highlight. So I Used Below Code Snippet to select only input[type=text] fields that has required attribute in annotation.

$("[data-val-required]").not(":hidden").not(":radio").not(":checkbox").after('<span style="color:red;max-width:10px;min-height:30px;">*</span>');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.