asp textbox required field validator message positioning

Question

I have used a asp:RequiredFieldValidator to validate a textbox. It works fine. But i need to change the position of the error message.

<div class="form-group">
                <label for="txtGarageName" class="col-sm-2 control-label">Garage Name</label>
                <asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control" Width="50%" ID="txtGarageName"></asp:TextBox>
                      <asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
                      ControlToValidate="txtGarageName"
                      ErrorMessage="Garage name is a required field."
                      ForeColor="Red">
                  </asp:RequiredFieldValidator>
              </div>

When i use this error message display starting from directly under the label. What i need to do is get the error message to display either in front of the text box or align it with the TextBox start point which means to alighn it more to right. I have tried using a css code as well as putting

margin-left=""

which i saw as solutions in the internet. Neither worked properly.

try using a class="span6" for textbox and the same for the required field validator — Abhishek Ghosh
in your case col-sm-6 AND use display=dynamic in Required Field Validator — Abhishek Ghosh
@AbhishekGhosh It didn't work. It will push the next controller(nest line label and text box) to right. Not the error message. Anyway these requiredfield validators ruin the layout. Do you have any other idea that can be used for validation purpose? — Isanka Lakshan
If the problem is that the error message doesn't fit in the available space the best ErrorMessage could be simply a * with ForeColor=Red — Abhishek Ghosh
It worked. I didn't use it on text box that's why it dint work.Thanks @AbhishekGhosh — Isanka Lakshan

Michal Michal · Accepted Answer · 2015-03-30T14:52:24

Use the grid system http://getbootstrap.com/css/#grid-example-basic

If you prefer a simple (non bootstrap) solution you should still use some placeholders for better formatting. An example that i found (not mine) http://jsfiddle.net/dqC8t/1/

#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto;
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px;
}

asp textbox required field validator message positioning

2 Answers