Hello everyone,
Currently, I am looking for a way to show input validation messages below the element instead of beside it. The default CSS file adds a margin-bottom of 19px to the <input /> element, so I need to adjust this positioning in order to have the message display directly under the input.
Here is an example: http://jsfiddle.net/L28E7/2/
Since ASP.NET generates all the HTML code, my options are limited. However, I was able to override the .field-validation-error class in CSS to achieve the desired effect.
The CSS modifications that I made (works in Firefox) result in the message appearing right under the element:
To accomplish this, I had to use a negative margin-top value, which is not an ideal solution. Any suggestions on how to improve this would be appreciated!
Thank you in advance!
CSS Changes Made:
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
HTML Used:
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>