5 Replies - 908 Views - Last Post: 05 November 2009 - 01:40 PM Rate Topic: -----

#1 MacAnimeGirl  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 282
  • Joined: 30-September 08

Making .Net controls that conform to HTML Strict validation

Posted 27 October 2009 - 11:38 AM

My question is how would I begin creating controls that are more validation friendly.

I've looked at the CSS Friendly Controls but.... I'm kind of lost on those.

I tried to do a complete validation on my site and I had the validation fail because the datalist control uses tables. I want to make something that will replace those table tags with divs instead.

Or make a control that has the same functionality (or at least some!) of the original. I know this is a ridiculous project and that I'm probably in way over my head, but I would like some help getting started.

I think once I'm able to create one, I should be okay.

So anyone have any ideas.

Like I said, I don't know where to begin. Which is why there isn't any code to show.

And I don't expect anyone to show me code! I just want a point in the right direction of how to start this project. I'd like to start with the DataList control, as it is the one I'm using now.

So... Am I completely out of my mind...?

I know I know... the answer is yes... *sigh*

Is This A Good Question/Topic? 0
  • +

Replies To: Making .Net controls that conform to HTML Strict validation

#2 ramesh866  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 91
  • Joined: 03-October 09

Re: Making .Net controls that conform to HTML Strict validation

Posted 28 October 2009 - 04:39 AM

can give any scenario type where in you want to implement what you want to achieve. because i hardly understand what you are trying to tell. :)
Was This Post Helpful? 0
  • +
  • -

#3 MacAnimeGirl  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 282
  • Joined: 30-September 08

Re: Making .Net controls that conform to HTML Strict validation

Posted 28 October 2009 - 06:26 AM

This simple code for the Employees page:
<%@ Page Language="VB" MasterPageFile="~/site.master" AutoEventWireup="false" CodeFile="employees.aspx.vb"
	Inherits="employees" Title="Colleton Software - Employees" %>

<asp:Content ID="body_employees" ContentPlaceHolderID="content" runat="Server">

	<div id="page_content">
		<asp:DataList ID="dlEmployee" CssClass="dlEmployee" runat="server" DataSourceID="adsEmployees" RepeatColumns="4" RepeatDirection="Horizontal">
			<HeaderTemplate>
				
			</HeaderTemplate>
			<ItemTemplate>
				<div class="divEmp">
					<asp:Label ID="EmpNameLabel" runat="server" Text='<%# Eval("EmpName") %>'></asp:Label><br />
					<asp:Label ID="EmpTitleLabel" runat="server" CssClass="empTitle" Text='<%# Eval("EmpTitle") %>'></asp:Label><br />
					<asp:Label ID="EmpEmailLabel" runat="server" Text='<%# Eval("EmpEmail") %>'></asp:Label><br />
					<asp:Label ID="EmpDomainLabel" runat="server" Text='<%# Eval("EmpDomain") %>'></asp:Label><br />
				</div>
				<br />
			</ItemTemplate>
			<AlternatingItemStyle CssClass="employees_alt" />
			<ItemStyle CssClass="employees" />
			<HeaderStyle CssClass="empHeader" />
		</asp:DataList>
		<asp:AccessDataSource ID="adsEmployees" runat="server" DataFile="~/Data/dbSite.mdb"
			SelectCommand="SELECT [EmpName], [EmpTitle], [EmpEmail], [EmpDomain] FROM [Employees]"></asp:AccessDataSource>
	</div>
</asp:Content>




turns into this when parsed out to the browser:
	<div id="page_content">
		<table id="ctl00_content_dlEmployee" class="dlEmployee" cellspacing="0" border="0" style="border-collapse:collapse;">
	<tr>
		<td colspan="4" class="empHeader">

				
			</td>
	</tr><tr>
		<td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees_alt">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees_alt">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td>

	</tr><tr>
		<td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees_alt">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees_alt">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td>
	</tr><tr>

		<td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>

				<br />
			</td><td class="employees_alt">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees_alt">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td>
	</tr><tr>
		<td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td class="employees_alt">

				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />

			</td><td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>

				<br />
			</td><td class="employees_alt">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td>
	</tr><tr>
		<td class="employees">
				<div class="divEmp">
					<span id="ctl00_content_dlEmployee_ctl17_EmpNameLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpTitleLabel" class="empTitle">*</span><br />

					<span id="ctl00_content_dlEmployee_ctl17_EmpEmailLabel">*</span><br />
					<span id="ctl00_content_dlEmployee_ctl17_EmpDomainLabel">*</span><br />
				</div>
				<br />
			</td><td></td><td></td><td></td>
	</tr>
</table>
		
	</div>



All those table tags kill my strict html validation.

I would prefer strict because it will challenge me to code better.

But no matter how well I code, if the controls I use don't use better methods of displaying than it really doesn't matter.

I'm sure I'm not the only one to have cursed Microsoft for this issue.

So... Anyway anyone can help?

The only way right now that I can see around this is to do a for next loop to go through each record and then write out the proper code.

That's really gonna bite, and take a lot of time to get the coding just right and then to make sure that each item is correctly styled...

So... help?

-------
Had to edit. Didn't feel right about all the information that was in there, even if it is on the website...

And ignore the names and id's of the spans. They're the same because I went through just copy and pasted the whole div once I got one fixed.

This post has been edited by MacAnimeGirl: 28 October 2009 - 06:39 AM

Was This Post Helpful? 0
  • +
  • -

#4 MacAnimeGirl  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 282
  • Joined: 30-September 08

Re: Making .Net controls that conform to HTML Strict validation

Posted 28 October 2009 - 06:34 AM

And see what is parsed out fails validation on the strict level, which is what I want to valid on.

Here are the validation errors I get:

Quote

Validation Output: 4 Errors

1. Error Line 10, Column 16: Attribute "name" exists, but can not be used for this element.

<form name="aspnetForm" method="post" action="employees.aspx" id="aspnetFor…



You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
2. Error Line 71, Column 149: document type does not allow element "table" here; missing one of "object", "ins", "del", "map", "button" start-tag

…ght:125px;border-collapse:collapse;">



The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
3. Error Line 7, Column 63: XML Parsing Error: attributes construct error

… href="css/master.css" rel="stylesheet" media="screen"type="text/css" />


4. Error Line 7, Column 63: XML Parsing Error: Couldn't find end of Start Tag link line 7

… href="css/master.css" rel="stylesheet" media="screen"type="text/css" />


The one about the table tags is my main concern. I'm working on the other ones.
Was This Post Helpful? 0
  • +
  • -

#5 MacAnimeGirl  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 282
  • Joined: 30-September 08

Re: Making .Net controls that conform to HTML Strict validation

Posted 05 November 2009 - 12:15 PM

So no one has ANY ideas?

Come on guys!! Let's work together!
Was This Post Helpful? 0
  • +
  • -

#6 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Making .Net controls that conform to HTML Strict validation

Posted 05 November 2009 - 01:40 PM

Quote

The name attribute on the form element is not allowed in XHTML 1.1 guidelines. You can configure your application not to render a name attribute.

http://msdn.microsof...y/exc57y7e.aspx

Check out the section titled, 'Controlling XHTML Rendering of ASP.NET Pages and Controls' to learn how to configure your site to use Strict (XHTML 1.0 Strict).
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1