Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Required asterisk enhancement #426

Open
speshulk926 opened this issue Jun 28, 2016 · 2 comments
Open

Required asterisk enhancement #426

speshulk926 opened this issue Jun 28, 2016 · 2 comments

Comments

@speshulk926
Copy link

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
Copy link
Owner

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

@speshulk926
Copy link
Author

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants