formatting issue in validation control - asp.net

I i'm using more than 1 validation for a text box in that case if 1st validation is not passed then the second validation is showing after some blank space that is for 1st validator.In my project for email textbox i'm using two validation requiredfield and regular expression but my regular expression validator not showing on right place.I tried css i.e left-margin but that not works for me.
my code is
First Name
Last Name
Email Id
</td>
</tr>
<tr>
<td>
User Id
</td>
<td>
<asp:TextBox ID="TextBox7" runat="server" EnableViewState="true" Height="22px" Width="189px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="TextBox7"
ErrorMessage="It is a mandatory field Can't be left blank" ForeColor="#FF3300"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" EnableViewState="true" TextMode="Password" Height="22px" Width="189px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ForeColor="#FF3300" ControlToValidate="TextBox4" ErrorMessage="It is a mandatory field Can't be left blank"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Full Address
</td>
<td>
<asp:TextBox ID="TextBox5" runat="server" Height="64px" TextMode="MultiLine" Width="189px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server"
ForeColor="#FF3300" ControlToValidate="TextBox5" ErrorMessage="It is a mandatory field Can't be left blank"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Mobile No.
</td>
<td>
<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server"
ForeColor="#FF3300" ControlToValidate="TextBox4" ErrorMessage="It is a mandatory field Can't be left blank"></asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ForeColor="#FF3300" ControlToValidate="TextBox6" ErrorMessage="Not in the correct format"
MaximumValue="9999999999" MinimumValue="1000000000"></asp:RangeValidator>
</td>
</tr>
</table>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/img/str/buttons/submit_blue.png" onclick="ImageButton1_Click" />

Try setting your validator's Display property to Dynamic. The default value for that property is Static, which means your validator's html is rendered with the visibility:hidden css rule, while with Dynamic it gets a display:none css rule instead. The visibility:hidden css rule will leave empty whitespace in place of an element, display:none won't.

you should divide the sections of data and validators. a Table will be fine or div sections
As you can see - if you put a table with td's so each side will have its own td. so when the break line occurs , the new line will be beneath the first one.
Also you will have to make some float:left inside you html for the red lines.
In a same manner , you can use div with fixed width.

Related

Remove certain parts of a webform based on selection from Drop Down List

I want to be able to be able to include and exclude parts of a form based on what type of request the user selects from a drop down list, also included on the form. Here is my current code. I can make the text boxes disappear but I can't make the labels disappear too.
<div>
<table>
<tr>
<td>
<font color="red">*</font>MAC Request Type:
</td>
<td>
<asp:DropDownList ID="ddlMACRequestType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlMACRequestType_Change">
<asp:ListItem Text="Select One" Value=""></asp:ListItem>
<asp:ListItem Text="Add Device" Value="Add Device"></asp:ListItem>
<asp:ListItem Text="Change Device" Value="Change Device"></asp:ListItem>
<asp:ListItem Text="Delete Device" Value="Delete Device"></asp:ListItem>
<asp:ListItem Text="Alert Change" Value="Alert Change"></asp:ListItem>
<asp:ListItem Text="Other" Value="Other"></asp:ListItem>
</asp:DropDownList>
<asp:CheckBox ID="chkbxLiveSearch" runat="server" Visible="false" Checked="true" AutoPostBack="true" OnCheckedChanged="chkbxLiveSearch_Change" Text=" Use Live Search" />
</td>
</tr>
<tr>
<td>
<font color="red">*</font>Device:
</td>
<td>
<asp:TextBox ID="txtDevice" runat="server" MaxLength="255" width="375" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<font color="red">*</font>Interface:
</td>
<td>
<asp:TextBox ID="txtInterface" runat="server" MaxLength="255" width="375" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
Someone recommended I use an asp:label, but how would I add my red asterisks as well? They are important for the project. This is something that someone suggested, but isn't working as expected.
<asp:Panel Visible="false">
<td>
<font color="red">*</font>Device:
</td>
<td>
<asp:TextBox ID="txtDevice" runat="server" MaxLength="255" width="375" ClientIDMode="Static"></asp:TextBox>
</td>
</asp:Panel>
In order to hide the label, create an <asp:Label> for it. This will give you the server side functionality similar to your <asp:TextBox>.
To make things even easier, I will often lean towards the use of an <asp:Panel>. This is essentially a server side <div> and gives you the ability to hide many things all at once rather than hiding all of them individually.
This also won't leave a bunch of empty table rows and cells all over the place.
<asp:Panel ID="pnlDevice" runat="server">
<tr>
<td>
<font color="red">*</font>Device:
</td>
<td>
<asp:TextBox ID="txtDevice" runat="server" MaxLength="255" width="375" ClientIDMode="Static"></asp:TextBox>
</td>
</tr>
</asp:Panel>
Then just hide the panel like other controls.
pnlDevice.Visible = false;

Unable to find control id 'ID of your Meter' referenced by the 'ControlToValidate' property of 'IDofyourMeterRequird'

I have this error when I run the register.aspx in Visual Studio after I added some fields. The fields are id, meter, and address.
This is the code:
<tr>
<td align="right">
<asp:Label ID="Label1" runat="server" AssociatedControlID="ID of your Meter">ID of your Meter:</asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ID of your Meter" ErrorMessage="ID is required." ToolTip="ID is required." ValidationGroup="RegisterUser">*</asp:RequiredFieldValidator>
</td>
</tr>
Error comes because you have
AssociatedControlID="ID of your Meter"
ControlToValidate="ID of your Meter"
and you should have there server IDs of controls which you are going to associate with
for instance like that in your case (you should anyway consider to change naming to be more descriptive):
<tr>
<td align="right">
<asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1">ID of your Meter:</asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="ID is required." ToolTip="ID is required." ValidationGroup="RegisterUser">*</asp:RequiredFieldValidator>
</td>
</tr>
It looks like you copied/pasted something from a tutorial and never changed it to work in your code:
AssociatedControlID="ID of your Meter"
ControlToValidate="ID of your Meter"
What/where is your "Meter"? You need to put in these attributes the server-side ID property of a control.
Notice how the server-side controls that you are using have ID properties:
ID="Label1"
ID="TextBox1"
ID="RequiredFieldValidator1"
These ID properties need to be unique, and that's what those other fields are looking for. The unique ID of a particular control.
Side note: You probably want to use more meaningful names for your IDs. It makes the code a lot easier to support and maintain.

add attribute to asp generated html elements - don't have code it was compiled from

If I have two inputs in a file I've received which are "put together" with aspx
<tr>
<td align="right">
<asp:Label ID="Label1" runat="server" Text="User Name:" CssClass="login_label"></asp:Label></td>
<td style="width: 200px">
<asp:TextBox ID="txtUserName" runat="server" TabIndex="1" Width="200px"></asp:TextBox></td>
<td style="width: 3px" align="left">
<asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="txtUserName">Required</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td align="right">
<asp:Label ID="Label2" runat="server" Text="Password:" CssClass="login_label"></asp:Label></td>
<td style="width: 200px">
<asp:TextBox ID="txtPassword" runat="server" TabIndex="2" Width="200px" TextMode="Password"></asp:TextBox></td>
<td style="width: 3px">
<asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword" ErrorMessage="Required">Required</asp:RequiredFieldValidator></td>
</tr>
How can I add autocapitalize="off" attribute to the inputs? Whenever I try to add something to this code——well, most of the time——it just totally breaks. But I would like it to be usable on mobile devices. Thanks for your help!
in the code behind:
NameOfInput.Attributes.Add('autocapitalize','off')
that is how you add an attribute to an html element visible by the server.
javascript: be wary this may not work right in all versions of IE. This should be in the document load event
document.getElementById('<%txtUserName.ClientID%>').setAttribute('autocapitalize','off');
jQuery: same warning as above.
also this should be in $(docuemnt).ready() function or load event.
$('#<%txtUserName.ClientID%>').attr('autocapitalize','off');
see this question for a better reason why you can't do what you want to here:
Autocapitalize attribute on input element (used for iOS) breaks validation
one last edit:
Apparently from the IOS development docs there is an example where you can add the attribute to your form element.
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/DesigningForms/DesigningForms.html
So maybe you can add it to the form element, which is not an asp namespace control. the validator may cry but you might not get a compile error.

2 validators validate one at a time

Hi I have a change password page.
I have 2 textboxes, New Password and Confirm Password.
Both have a requiredFieldValidators.
And a compareValidator.
But what happens is when I key in the first field New Password, the second textbox's requiredFieldValidator and CompareValidator are showing error messages at the same time.
I only want to show requiredFieldValidator and only when that validator returns true, I want to validate compareValidator.
How can I achieve that. The following is my code.
<table class="editAccTable">
<tr>
<td>
New Password<br />
<asp:TextBox ID="txtNewPwd" runat="server" TextMode="Password" Width="204px"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="rfvNewPwd" runat="server"
ControlToValidate="txtNewPwd"
ValidationGroup="vgChangePwd"
Display="Dynamic"
></asp:RequiredFieldValidator>
</td>
<td>
Confirm New Password<br />
<asp:TextBox ID="txtConfPwd" runat="server" TextMode="Password" Width="204px"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="rfvConfPwd" runat="server"
ControlToValidate="txtConfPwd"
ValidationGroup="vgChangePwd"
Display="Dynamic"
></asp:RequiredFieldValidator>
<asp:CompareValidator ID="cvChangePwd" runat="server"
ValidationGroup="vgChangePwd"
ControlToValidate="txtNewPwd"
ControlToCompare="txtConfPwd"
ValueToCompare="String"
Display="Dynamic"
></asp:CompareValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:ImageButton ID="ibtnPwdChange" runat="server"
ImageUrl="/images/submit.jpg" onclick="ibtnPwdChange_Click"
ValidationGroup="vgChangePwd"
Width="90px" Height="36px"
/>
<br />
<asp:Label ID="lblSuccessPwdChange" runat="server"></asp:Label>
</td>
</tr>
</table>
There is a couple of work around.
For my case, I can remove the requiredFieldValidator for the second textbox as it is enough to have only compareValidator.
But there will be some cases, that there must have 2 validators. In that case, we can use css to overlap the 2 validators.
Try CompareValidator like this
<asp:CompareValidator id="cvChangePwd" runat="server" ControlToValidate="txtConfPwd" ControlToCompare="txtNewPwd" ErrorMessage="Your passwords do not match up!" Display="Dynamic" />
set display property as dynamic
display="dynamic" in all the validators

validation showing in both panels in asp.net

i am using two panels (login and registration) in asp.net where in both panels i used button control. and i also used validations for particular textboxes in both panels.
i want to show both panels at same time.
now what problem i am facing is that when i click on button of login panel, it shows validation error text in registration panel and vice-versa..
Is there nay other way to use any other control instead of button.
i am using visual studio-2008
i had created login panel as:
<asp:Panel ID="pnllogin" runat="server">
<table class = "style1">
<tr>
<td>
<asp:Label ID="lblloginid" runat="server" Text="Login_ID" Font-Bold="true"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtboxloginid" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="requiredfieldvalidator1" runat="server"
ControlToValidate="txtboxloginid" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblpassword" runat="server" Text="Password" Font-Bold="true"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtboxpassword" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="requiredfieldvalidator2" runat="server"
ControlToValidate="txtboxpassword" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:HyperLink ID="hyperlinkforgotpassword" runat="server" ForeColor="Red" NavigateUrl="~/ForgotPassword.aspx">Forgot Password??</asp:HyperLink>
</td>
</tr>
<tr>
<td> </td>
<td>
<asp:ImageButton ID="imgbtnlogin" runat="server" ImageUrl="~/images/login.png"
onclick="imgbtnlogin_Click" />
</td>
</tr>
</table>
</asp:Panel>
and somewhat same code for registration panel..
can someone please help me..
Make use of ValidationGroup property to fire the validation message related to proper panel
here is detail info : http://www.w3schools.com/ASPNET/prop_webcontrol_imagebutton_validationgroup.asp
demo : http://www.w3schools.com/ASPNET/showasp.asp?filename=demo_prop_webcontrol_imagebutton_validationgroup
Specifying Validation Groups

Resources