Accessibility asp.net label HTML5 - asp.net

I have an asp.net label control which is associated with a server control. However depending on runtime conditions sometimes this server control is invisible. Hence when the server control is invisible the accessibility tool states that there is no server control for this label. A kinda dirty fix is to self reference the label as follows:
<asp:Label ID="LabelId" runat="server" AssociatedControlID="LabelId" />
This passes the accessibility tool in all circumstances but it doesn't seem like a great solution.

It tells label, where the focus should go once the label is clicked.
As shown in the below example. If you click on "Enter First Name" label, focus will go to FirstName textbox and if you click on "Enter Last Name" label, focus will go to LastName textbox.
<form id="form1" runat="server">
<div>
<asp:Label ID="lblFirstName" runat="server" Text="Enter First Name" AssociatedControlID="txtFirstName" />
<asp:TextBox ID="txtFirstName" runat="server" />
<asp:Label ID="lblLastName" runat="server" Text="Enter Last Name" AssociatedControlID="txtLastName" />
<asp:TextBox ID="txtLastName" runat="server" />
</div>
</form>
Label.AssociatedControlID Property (System.Web.UI.WebControls) | Microsoft Docs

Related

How to add child object to textbox in asp.net?

I want to add child object to a TextBox, but this code gives an error
How can I achieve this?
<asp:TextBox ID="TextBox2" runat="server">
<asp:Label runat="server" Text="Label"></asp:Label>
</asp:TextBox>`
TextBox and Label are two different controls. You cant nest a Label inside a text Box.
Eg:
<asp:Label runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"> </asp:TextBox>
What do you want to do here?
As there are some of the ASP.NET controls like Linkbutton which allows you to hold HTML controls inside them
<asp:LinkButton ID="lnkDelete" runat="server" CssClass="remove">
<span><font color="#fb4202">x</font> Remove</span>
</asp:LinkButton>
but it is not possible to hold a asp:Label in a asp:Textbox control
What you are trying to do is impossible. While WPF has a framework that enables this kind of things, HTML and thus ASP.NET does not.
If you are trying to set the text, try this:
<asp:TextBox ID="TextBox2" runat="server" Text="abc" />
Else, just put them side by side:
<asp:Label runat="server" Text="Label" />
<asp:TextBox ID="TextBox2" runat="server" />
Textbox is a Editable Control and Label is non-Editable Control, so you can't put Label inside TextBox. You can Put Label Just Before The Textbox as :
<asp:Label ID="Label1" runat="server" Text="Enter Text"><asp:Label>
<asp:TextBox ID="txtValue" runat="server"/>

Required field in another Panel is causing problems on ASP.NET Panel

i have the following code
<asp:Panel ID="searchPanel" DefaultButton="searchButton" runat="server">
<asp:TextBox ID="searchBox" runat="server" value=" Search..."></asp:TextBox>
<asp:Button ID="searchButton" runat="server" Style="display: none" OnClick="searchInput" />
</asp:Panel>
<asp:Panel ID="loginPanel" DefaultButton="submitButton" runat="server">
<asp:TextBox ID="username" runat="server" required="required"></asp:TextBox>
<asp:TextBox runat="server" ID="password" required="required"></asp:TextBox>
<asp:Button ID="submitButton" runat="server" Text="Log in" OnClick="login" />
</asp:Panel>
whenever i press 'enter' key when searchBox is focused, in the other panel fields are highlighted and says "Please fill the field".
How can I solve this?
I believe you are using HTML 5 "required" attribute. This will cause validation when you try to do a postback.
You can use a form specific for search control and use "novalidate" attribute in the form element.
Or
You can use validation groups to achieve this.
solved the issue by using validation group
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ControlToValidate="username"
ValidationGroup="emailValidationGroup"
runat="Server">
</asp:RequiredFieldValidator>
ValidationGroup="emailValidationGroup" //goes to button
also don't forget to add
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>
to webconfig

html5 required is not allowing button click action to fireup

I have an input page where i want to create some required fields and some aren't.
That means that at the first part of the form, you can select the date by pressing a button to show a calender to select the desired date, adding users (by pressing a button) and then you add the required text and finally a submit button.
Right now, when I put the required attribute to the input tag, the first two buttons don't work. They don't fire up and it writes that first I need to insert the required items.
How can I remove the connection between those specific buttons and the required inputs?
Thanks, Arkadi.
Code:
<h3> Create New Project</h3>
Users Added: <asp:TextBox ID="TextBox1" runat="server"
ReadOnly="True"></asp:TextBox>
<asp:Label ID="lblAdded" runat="server" Text="Label" >User Was Already Added</asp:Label>
<asp:Label ID="lblNotFound" runat="server" Text="Label" >User Was Not Found</asp:Label>
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"></asp:CheckBoxList>
Add User<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br /><br />
Project Name: <input ID="txtName" runat="server" required="required" />
Hand Over Date: <asp:TextBox ID="txtHandOverDate" runat="server" ReadOnly="true"></asp:TextBox>
<asp:Button ID="btnSelectDate" runat="server" Text="SelectDate"
OnClick="btnSelectDate_Click" />
<asp:Calendar ID="Calendar1" runat="server" Visible="False"
OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>
Hand Over Form: <input ID="txtHandOverForm" runat="server" required="required"/>
Subject: <input ID="txtSubjectField" runat="server" required="required" />
Project Porpuse <input ID="txtPorpuse" runat="server" required="required" />
Perimiters<input ID="txtPerimiters" runat="server" required="required" />
Comments <textarea id="txtComments" runat="server"></textarea>
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
I found what I wanted, so to all those who will see this:
I just needed to change the type of the button from submit to command, that means adding the attribute UseSubmitBehavior to false.
Thanks for the Answers, this site is great!
The OnClick events run at the server, but the required attrib is preventing the code from being submitted. If you want to run client side (ie javascript) code, then you will need to use the OnClientClick event instead.

ASP.NET:Required Field Validator not working

I've got a weird problem that i don't understand why it happened.
I made a content page so a user can send me a message to my email and made a few TextBox's that are linked to some validators.
when i first made the page i hed 1 Regular Expression validator and every thing worked out fine like i planed it, But then i decided to delete the Regular Expression validator and now i got a problem with the Required Field validator.
when i press submit the page do a post back like there isn't any validators on the page.
I'm pretty sure I'm missing something (I'm pretty new at asp.net)
here is the markup:
<!-- Regular Expression Validtor for the Name Text Box
<asp:RegularExpressionValidator ID="NameExpressionValidator1" runat="server" ControlToValidate="nameTextBox"
ValidationExpression="[אבגדהוזחטיכלמנסעפצקרשתץףןם\s\.]*" Display="Dynamic"> </asp:RegularExpressionValidator> -->
<!--The Name Text Box -->
<asp:TextBox ID="nameTextBox" class="TextBoxes" runat="server"
AutoPostBack="True" ValidationGroup="g" ></asp:TextBox> <span class="infoText">:שם</span>
<!-- Required Field Validator for the Name Text Box -->
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="nameTextBox"
Display="Dynamic" ValidationGroup="g" ErrorMessage="please enter your name"></asp:RequiredFieldValidator>
<br />
<br />
<!-- Phone Text Box -->
<asp:TextBox ID="phoneTestBox" class="TextBoxes" runat="server"
AutoPostBack="True" ValidationGroup="g" ></asp:TextBox> <span class="infoText">:טלפון</span>
<!-- Requierd Field Validator Phone Text Box -->
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="phoneTestBox"
Display="Dynamic" ValidationGroup="g" ErrorMessage="please enter your phone"></asp:RequiredFieldValidator>
<br />
<br />
<asp:TextBox ID="messagTextBox" runat="server" class="TextBoxes" TextMode="MultiLine"
Text="asdasdadasdasdasd"></asp:TextBox> <span class="infoText">:הודעה</span>
<asp:Button ID="button" runat="server" Text="send message" ValidationGroup="g" />
You should not use HTML comments to comment out server side controls but <%-- --%>:
<%--
<asp:RegularExpressionValidator ID="NameExpressionValidator1" runat="server" ControlToValidate="nameTextBox"
ValidationExpression="[אבגדהוזחטיכלמנסעפצקרשתץףןם\s\.]*" Display="Dynamic"> </asp:RegularExpressionValidator>
--%>
http://msdn.microsoft.com/en-us/library/4acf8afk.aspx
Is there any specific use of AutoPostBack="True" in textbox? if not then just remove it from all textboxes, also you need to give ValidationGroup="g" for only validator controls, there is no need to give it in textbox controls.
first of all, ensure the validation group of the validation summary matches?
If that's correct try using validation method:
protected void Page_Load(object sender, EventArgs e)
{
Validate();
}

CheckBox selection area

I have an <asp:ComboBox> filled with <asp:CheckBoxes>. The Combobox is 200px wide. The Checkboxes are also 200px wide.
I can check the checkbox only if I click on 'box' or the checkbox text label. I want to be able to check the item even when I click anywhere on the row.
Is there any way to extend this area to the whole row?
update:
On the green area, everything is fine.
But on the red area when i click, checkbox is not checked and drop downlist goes up.
<telerik:RadComboBox runat="server" EnableTextSelection="false"
ID="rcb_Something"
Width="200px"
HighlightTemplatedItems="true"
AllowCustomText="true"
Text="Select Something"
MaxHeight="250px">
<ItemTemplate>
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server"
Width="24px"
Height="24px"
DataValue='<%# Eval("Something") %>'
ResizeMode="Fit" />
<asp:CheckBox ID="CheckBox1"
runat="server"
Text='<%# Eval("Something") %>'
ToolTip='<%# Eval("SomethingId") %>'
/>
</ItemTemplate>
Do as books say - add to every input field in HTML, a label tag with label.
<label for="male">Male</label> <input type="radio" name="sex" id="male" />
Clicking anywhere on label, will activate this input, same goes for input type=text
Ok, I find solution. I just disabled combobox background with following code.
JavaScript
function StopPropagation(e) {
//cancel bubbling
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
aspx
<div onclick="StopPropagation(event)">
<asp:CheckBox ID="CheckBox1"
runat="server"
Text='<%# Eval("something") %>'
ToolTip='<%# Eval("somethingId") %>'
/>
</div>

Resources