How to wrap ASP.net validation controls in Bootstrap classes? -
i using bootstrap 3 asp.net webforms , new bootstrap. webform working on uses asp.net validation controls. web form has standard layout 2 columns , using "form-group" class group labels , input fields.
now problem placing label, input field validator in bootstrap "form-group" class, message in text property of validator being displayed in next line after validation. want displayed right next input field. there alternative way can this?
<div class="form-group"> <asp:label runat="server" associatedcontrolid="txtbox">address <span class="required">*</span></asp:label> <asp:textbox id="txtbox" runat="server" cssclass="form-control"/> <asp:requiredfieldvalidator id="rfvline1" validationgroup="<%# validationgroup %>" controltovalidate="txtbox" runat="server" display="dynamic" errormessage="line 1 required." text="*"/> </div>
easiest way create validation in separate column.
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style type="text/css"> .required { color: #e31937; font-family: verdana; margin: 0 5px; } .field-validation-error { color: #e31937; font-weight: bold; } </style> </head> <body> <form id="form1" runat="server"> <br /> <div class="container form-horizontal"> <div class="form-group"> <asp:label runat="server" associatedcontrolid="txtbox" cssclass="col-xs-12 col-sm-4 control-label"> address <span class="required">*</span> </asp:label> <div class="col-xs-12 col-sm-4 "> <asp:textbox id="txtbox" runat="server" cssclass="form-control" /> </div> <div class="col-xs-12 col-sm-4 form-control-static"> <asp:requiredfieldvalidator id="rfvline1" controltovalidate="txtbox" runat="server" display="dynamic" cssclass="field-validation-error" text="line 1 required." /> </div> </div> <div class="form-group"> <div class="col-xs-12 col-sm-offset-4 col-sm-4 "> <asp:button runat="server" id="submitbutton" text="submit" cssclass="btn btn-primary" /> </div> </div> </div> </form> </body> </html>
Comments
Post a Comment