DmitryEfimenko / TwitterBootstrapMvc

Fluent implementation of ASP.NET-MVC HTML helpers for Twitter Bootstrap.
Apache License 2.0
223 stars 79 forks source link

Required asterisk enhancement #426

Open speshulk926 opened 8 years ago

speshulk926 commented 8 years ago

This is an enhancement request for the Required Asterisk. I'm looking for 2 things. Remember, these are just examples of what would be nice to have! I tried to use css to alter what was there and was unable to and didn't really want to go the javascript route if I didn't have to.

  1. Can we use an image instead of (or in addition to) the textual " * "?
  2. Can we assign the placement of the image and/or text to where the label is?

    Example 1 - Image URL:

@Html.Bootstrap().TextBoxFor(m => m.FirstName).Label().ImageUrl('img/bullet.png')

would produce: <label for="FirstName">First Name <img src="img/bullet.png" class="required" /></label> <input name="FirstName" class="form-control" id="FirstName" type="text" value="" data-val-required="The FirstName field is required." data-val="true">

Example 2 - Required Star Location Left

@Html.Bootstrap().TextBoxFor(m => m.FirstName).Label().RequiredStarLeft()

would produce: <label for="FirstName"><span class="required">*</span> First Name</label> <input name="FirstName" class="form-control" id="FirstName" type="text" value="" data-val-required="The FirstName field is required." data-val="true">

Example 3 - Required Star Location Right

@Html.Bootstrap().TextBoxFor(m => m.FirstName).Label()

would produce: <label for="FirstName">First Name <span class="required">*</span></label> <input name="FirstName" class="form-control" id="FirstName" type="text" value="" data-val-required="The FirstName field is required." data-val="true">

Example 4 - Required Star Location Left with Image

@Html.Bootstrap().TextBoxFor(m => m.FirstName).Label().ImageUrl('img/bullet.png').RequiredStarLeft()

would produce: <label for="FirstName"><img src="img/bullet.png" class="required" /> First Name</label> <input name="FirstName" class="form-control" id="FirstName" type="text" value="" data-val-required="The FirstName field is required." data-val="true">

DmitryEfimenko commented 8 years ago

these are good suggestions. I'm a bit swamped right now, but I'll get to them.

speshulk926 commented 8 years ago

Thanks! For now, I just separated my labels, textboxes and required fields and put ShowRequiredStar(false) on all of them. It works fine like that. I really love this product still and thanks for taking suggestions :)

So right now I have:

<img src="~/Content/img/bullet-red-icon.png" alt="Required" /> @Html.Bootstrap().LabelFor(m => m.FirstName).ShowRequiredStar(false) @Html.Bootstrap().TextBoxFor(m => m.FirstName)