asp.net validation controls - CSS placement - css

I am creating an address control which would use some address validation APIs( google/bing etc) to validate the user entered address. I would also like to validate the fields in the client side (like required fields, Zip format etc) with asp.net validation controls. I am trying to build this with CSS and am using float to align the text boxes (or is there a better way ?) The validation controls have dynamic display and want to place them next to the text boxes when they are not validated. Right now it wraps around/messes up with the placement of other controls. May be there is a better way of doing it ? Here is my code
<style type="text/css">
.Wrapper{
width:auto;
height:auto;
}
.address{
width:500px;
height:auto;
}
.validator{
}
.textbox {
float:right;
}
label{
float:left;
}
.button-right{
float:right;
margin-right:290px;
}
div{
margin:5px;
}
.field
{
width:200px;
}
</style>
<div id="addressUI" class="address">
<div class="field" >
<label ID="lblStreet" for="txtStreet">Street: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text="" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdStreet" runat="server" ErrorMessage="Street is required" ControlToValidate="txtStreet" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblCity" for="txtCity">City: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtCity" runat="server" Text="" CssClass="textbox" > </asp:TextBox>
<asp:RequiredFieldValidator ID="rqdCity" runat="server" ErrorMessage="City is required" ControlToValidate="txtCity" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblState" for="ddlState" >State: </label><label style="color:Red">*</label>
<asp:DropDownList ID="ddlState" runat="server" style="width:80px;margin-left:12px;" CssClass="">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState" ErrorMessage="State is required" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblZip" for="txtZip">Zip: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtZip" runat="server" CssClass="" Text="" style="width:50px;margin-left:22px;" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdZIP" ControlToValidate="txtZip" runat="server" ErrorMessage="ZIP is required" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexValidator" runat="server"
ErrorMessage="Zip is invalid" Display="Dynamic" ControlToValidate="txtZip"
ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
</div>
<div class="button-right">
<asp:Button ID="btnValidate" runat="server" Text="validate" OnClick="btnValidate_Click" CausesValidation="true" />
</div>
</div>

<head>
<style type="text/css">
label
{
display:inline;
float:left;
width:75px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="addressUI" class="address">
<div class="field">
<label id="lblStreet" for="txtStreet">
Street: <span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text=""></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdStreet" runat="server" ControlToValidate="txtStreet"
Display="Dynamic" ErrorMessage="Street is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblCity" for="txtCity">
City:<span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtCity" runat="server" CssClass="textbox" Text=""> </asp:TextBox>
<asp:RequiredFieldValidator ID="rqdCity" runat="server" ControlToValidate="txtCity"
Display="Dynamic" ErrorMessage="City is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblState" for="ddlState">
State:<span style="color: Red">*</span>
</label>
<asp:DropDownList ID="ddlState" runat="server" CssClass="" Style="width: 80px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState"
Display="Dynamic" ErrorMessage="State is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblZip" for="txtZip">
Zip:<span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtZip" runat="server" CssClass="" Style="width: 50px"
Text=""></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdZIP" runat="server" ControlToValidate="txtZip"
Display="Dynamic" ErrorMessage="ZIP is required">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexValidator" runat="server" ControlToValidate="txtZip"
Display="static" ErrorMessage="Zip is invalid" ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
</div>
<div class="button-right">
<asp:Button ID="btnValidate" runat="server" CausesValidation="true"
Text="validate" />
</div>
</div>
</div>
</form>
</body>
</html>

Related

margin-left is not working in asp.net label

Please find my code below.
<div style="position:relative">
<asp:Label ID="lbl_details" runat="server" style="margin-top:50px;display:inline-block" Text="Details"
Width="150px"></asp:Label>
<textarea id="txtarea_details" runat="server" cssclass="textbox" maxlength="150" columns="30" rows="5"
style="border:1px solid #CCC; margin-top:0px; margin-left:0px; width:191px; white-space:pre-wrap"></textarea>
<asp:Label ID="Label12" runat="server"
Text=" &nbsp Remarks"
Width="345px"></asp:Label>
<asp:TextBox ID="txt_remarks" runat="server" style="margin-top:0px;" CssClass="textbox"></asp:TextBox>
</div>
<div style="position:relative">
<div style="width:30%;float:left,text-allign:right,padding:50px,0px,0px,15px">
<asp:Label ID="lbl_details" runat="server" Text="Details" ></asp:Label>
</div>
<div style="width:70%;float:left,text-allign:left,padding:50px,0px,0px,15px">
<textarea id="txtarea_details" runat="server" cssclass="textbox" maxlength="150" columns="30" rows="5"
style="border:1px solid #CCC; margin-top:0px; margin-left:0px; width:191px; white-space:pre-wrap"></textarea>
<div style="width:30%;float:left,text-allign:right,padding:50px,0px,0px,15px">
<asp:Label ID="Label12" runat="server"Text="Remarks"
Width="345px"></asp:Label>
</div>
<div style="width:70%;float:left,text-allign:right,padding:50px,0px,0px,15px">
<asp:TextBox ID="txt_remarks" runat="server" style="margin-top:0px;" CssClass="textbox"></asp:TextBox>
</div>
</div>

Div not going invisible when the visible set to false on button clcik

I have a div with 3 text box fields on it where i am using
asp:RequiredFieldValidator and asp:CompareValidator
on change password button click the div getting visible
protected void btnPass_Click(object sender, EventArgs e)
{
chngPwd.Visible = true;
}
and on the button cancel visible property set to false but its not going invisible.
protected void btnCancel_Click(object sender, EventArgs e)
{
chngPwd.Visible = false;
}
ASP code is as follows
<div runat="server" id="chngPwd" visible="false" style="margin-left: 40px">
<div>
<div class="col-md-4"></div>
<div class="col-md-8">
<asp:Label ID="lblOldP" runat="server" Text="Old Password: -"></asp:Label>
<asp:TextBox ID="txtOldP" runat="server" TextMode="Password" Width="149" Height="33px"></asp:TextBox>
</div>
<br />
<br />
</div>
<div>
<div class="col-md-4"></div>
<div class="col-md-8">
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtOldP" CssClass="text-danger" ErrorMessage="The Old Password field is required." />
<br />
</div>
</div>
<br />
<div>
<div class="col-md-4"></div>
<div class="col-md-8">
<asp:Label ID="lblNewP" runat="server" Text="New Password: -"></asp:Label>
<asp:TextBox ID="txtNewP" runat="server" TextMode="Password" Width="149" Height="33px"></asp:TextBox>
</div>
<br />
<br />
</div>
<div>
<div class="col-md-4"></div>
<div class="col-md-8">
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtNewP" CssClass="text-danger" ErrorMessage="The New Password field is required." />
<br />
</div>
</div>
<br />
<div>
<div class="col-md-4"></div>
<div class="col-md-8">
<asp:Label ID="lblRNewP" runat="server" Text="Confirm New Password: -"></asp:Label>
<asp:TextBox ID="txtRNewP" runat="server" TextMode="Password" Width="149" Height="33px"></asp:TextBox>
</div>
<br />
<br />
</div>
<div>
<div class="col-md-4"></div>
<div class="col-md-8">
<asp:RequiredFieldValidator runat="server" ControlToValidate="txtRNewP" CssClass="text-danger" ErrorMessage="The Confirm New Password field is required." />
<br />
<asp:CompareValidator runat="server" ControlToCompare="txtNewP" ControlToValidate="txtRNewP" CssClass="text-danger" ErrorMessage="The Password doesn't match." />
<br />
</div>
</div>
<br />
<div>
<div class="col-md-8"></div>
<div class="col-md-4">
<asp:Button ID="btnSbmt" runat="server" Text="Submit" OnClick="btnChngP_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
</div>
</div>
<br />
<br />
<div>
So your issue here is the validators are working as intended. The btnclick is going off but not calling because you have a validator. If you enter in the information and then hit cancel the div will hide. But you have It set to not run anything unless those textboxes are filled.
So we will change this
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" />
to this
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="false"/>

RadioButtons causing built-in .net form validation to malfunction

I have a very basic form in a .Net page, it has 6 fields each with a requiredfieldvalidator attached. Everything works fine and the form is stopped if even one field is blank. I was asked to add a section with 2 radio buttons (I set one option as checked to avoid any validation on the field), now the form submits no matter if the fields have information in them or not.
Subset of default.aspx
<form id="form1" runat="server">
<div style="margin-bottom:10px;">
<label for="txtAgencyName">Name of Agency</label>
<asp:TextBox ID="txtAgencyName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAgencyName" runat="server" ErrorMessage="*Required" ControlToValidate="txtAgencyName" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
</div>
<div style="margin-bottom:10px;">
<label for="txtEmail">Email Address</label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ErrorMessage="*Required" ControlToValidate="txtEmail" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="Invalid Email Address" CssClass="revErrors" ValidationExpression="(^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$)" ValidationGroup="vg1" ControlToValidate="txtEmail"></asp:RegularExpressionValidator>
</div>
<!-- This is the section that is breaking the validation -->
<div style="margin-bottom:10px;">
<asp:RadioButton ID="rbOwnershipAgent" runat="server" Checked="true" GroupName="Ownership" />
<asp:RadioButton ID="rbOwnershipReferral" runat="server" GroupName="Ownership" />
</div>
<!-- --------------------------------------------------- -->
<div style="margin-bottom:10px;">
<label for="txtAgencyContact">Agency Contact Name</label>
<asp:TextBox ID="txtAgencyContact" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAgencyContact" runat="server" ErrorMessage="*Required" ControlToValidate="txtAgencyContact" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
</div>
<div style="margin-bottom:10px;">
<label for="txtPhone">Telephone Number</label>
<asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvTelephone" runat="server" ErrorMessage="*Required" ControlToValidate="txtPhone" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
</div>
<div>
<label for="ddlState">State</label>
<asp:DropDownList ID="ddlState" runat="server" AppendDataBoundItems="True">
<asp:ListItem Text="Select State" Value=""></asp:ListItem>
</asp:DropDownList>
</div>
<div style="margin-bottom:10px;">
<label for="taCarriers">In your agency, who are the carriers writing liquor liability for you today?</label>
<asp:TextBox ID="taCarriers" runat="server" TextMode="MultiLine" Rows="3"></asp:TextBox><asp:RequiredFieldValidator ID="rfvOtherCarriers" runat="server" ErrorMessage="*Required" ControlToValidate="taCarriers" ValidationGroup="vg1" CssClass="rfvErrors" style="margin-top:15px;"></asp:RequiredFieldValidator>
</div>
<div style="width:100%;margin-top:20px;border-bottom:1px solid #27a0d6"></div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit ยป" name="bnSubmit" class="submit" ValidationGroup="vg1" />
</form>
Am I missing something simple as far as an attribute on the submit button or radio buttons? I'm just surprised that a built in .Net control is causing this kind of trouble for something this basic. Thanks for any help.

Bootstrap 3.0 "row" first item not aligned correctly

Using Bootstrap 3.0 and the code below is a snip of a which contains 3 items, each in a which looks and works well, except the first element in this row (plus others) is shifted slightly above the other elements within the "ROW." I've attached a screenshot of the issue. I haven't modified the Bootstrap CSS to cause any issues.
Note: the other rows don't contain ASP controls which I thought was the issue but it's not.
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2><%: Title %>.</h2>
<hr />
<section id="CreateUserForm">
<h4>Create User <i class="fa fa-user"></i></h4>
<!--1st ROW-->
<div class="row">
<div class="form-group">
<div class="col-md-4">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
</div>
</div>
</div>
<!--END 1st ROW-->
<!--2nd Row-->
You need to wrap everything in a .container.
The fix was removing "form-group" around the controls and inserting a break after each "ROW"
<!--1st ROW-->
<div class="row">
<div class="col-md-4">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
<div class="col-md-4">
<input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
</div>
<div class="col-md-4">
<input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
</div>
</div>
<br />
<!--END 1st ROW-->
I had the same problem with a form I was creating, I found the answer was to add the column class before the form-group. This fixed the alignment issue and there was no need to add a break between rows (form-group takes care of spacing for you).
<!--1st ROW-->
<div class="row">
<div class="col-md-4">
<div class="form-group">
<asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
<asp:ListItem Text="-- Select User Role --" Value="" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
</div>
</div>
Hope this helps.

ValidationSummary always showing asterisks

I have the following setup for a changepassword control:
<asp:ChangePassword ID="ChangePassword1" runat="server">
<ChangePasswordTemplate>
<h3>
Password Management</h3>
<asp:TextBox ID="CurrentPassword" runat="server" TextMode="Password" Style="display: none;"></asp:TextBox>
<div class="field">
<asp:Label ID="NewPasswordLabel" runat="server" AssociatedControlID="NewPassword">New Password:</asp:Label>
<asp:TextBox ID="NewPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="NewPasswordRequired" runat="server" ControlToValidate="NewPassword" Display="Dynamic"
ErrorMessage="New Password" ToolTip="New Password is required."
ValidationGroup="ChangePassword1" EnableClientScript="false"></asp:RequiredFieldValidator>
</div>
<div class="field">
<asp:Label ID="ConfirmNewPasswordLabel" runat="server" AssociatedControlID="ConfirmNewPassword">Confirm New Password:</asp:Label>
<asp:TextBox ID="ConfirmNewPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="ConfirmNewPasswordRequired" runat="server" ControlToValidate="ConfirmNewPassword"
ErrorMessage="Confirm New Password" ToolTip="Confirm New Password is required." Display="Dynamic"
ValidationGroup="ChangePassword1" EnableClientScript="false"></asp:RequiredFieldValidator>
</div>
<div class="field">
<asp:CompareValidator ID="NewPasswordCompare" runat="server" ControlToCompare="NewPassword"
ControlToValidate="ConfirmNewPassword" Display="Dynamic" ErrorMessage="The Confirm New Password must match the New Password entry."
ValidationGroup="ChangePassword1"></asp:CompareValidator>
</div>
<asp:ValidationSummary ID="ChangeUserPasswordValidationSummary" runat="server" CssClass="failureNotification"
ValidationGroup="ChangePassword1"/>
<div class="action">
<asp:Button ID="ChangePasswordPushButton" runat="server" CommandName="ChangePassword"
Text="Change Password" ValidationGroup="ChangePassword1" />
<asp:Button ID="CancelPushButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" Width="120" />
</div>
</ChangePasswordTemplate>
</asp:ChangePassword>
When i click on the ChangePasswordPushButton the validation all works as expected other than the validationsummary shows 2 asterisks!
Anyone have any idea why
I found out what the problem was. Error message was being set in a Theme!
Grrr
Try adding the following code on all of your validators and the ValidationSummary:
EnableTheming="False"

Resources