Any ideas why this won't validate here:
http://validator.w3.org/#validate_by_input
It seems the form input tags are wrong but reading through the XHTML spec they should validate fine. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Try putting a fieldset tag around the inputs. I think the idea of forms in XHTML is that they can't have direct descendants that aren't div, fieldset, etc.
You need to move
<div class="Controls">
so that it's inside the <form tag
This validates nicely
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
As someone else put it:
[quote]
The validator is telling you that your hidden input element cannot immediately follow the form tag - it needs to have a container element of some kind.
[/quote]
(Source)
I guess a fieldset could help; See The XHTML DTD:
<!ELEMENT form %form.content;>
<!ENTITY % form.content "(%block; | %misc;)*">
<!ENTITY % misc "noscript | %misc.inline;">
<!ENTITY % misc.inline "ins | del | script">
<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">
<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">
No input for you :(
I had the very same problem and it took me some time to figure out. Is this a recent change with the w3c validator? it's just I'm sure some of my pages with forms validated in the past, but now they all seem to through up errors for the same problem.
I used to always do something like:
<div>
<form>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</form>
and get validation errors, so now I just add fieldset or div around all the labels and inputs to get it to validate, like this:
<div>
<form>
<fieldset>or<div>
<label></label>
<input />
<label></label>
<input />
<label></label>
<input />
</fieldset>or</div>
</form>
Seems to work, but I'm sure I didn't have to do this in the past... hmmm?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span>
</div>
</td>
<td>
<form id="ControlForm" method="get" action="Edit.php">
<div class="Controls">
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</div>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>
Put your div inside your form.
Your input elements should be within a fieldset. This validates and has the added benefit of making the document more accessible to non-visual user agents.
As an aside, your markup is suffering from divitis a bit. You could put classes on the table cells directly rather than nesting div elements within them (I'm not going to comment on the use of tables for layout). Also, you could style the form element directly rather than nesting it within a div.
Anyway, here's your example with a fieldset added so it validates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<div class="Header">
<table class="HeaderTable">
<tr>
<td>
<div class="Heading">Test <span class="Standard">Test</span></div>
</td>
<td>
<div class="Controls">
<form id="ControlForm" method="get" action="Edit.php">
<fieldset>
<input type="submit" name="action" id="Edit" value="Edit" />
<input type="submit" name="action" id="New" value="New" />
</fieldset>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Related
I have a website where I use AJAX ModalPopupExtender to show error messages. It works fine on one of the pages.
I had to create another page for a new functionality and there the same code does not work, whatever I do.
I have created some simplified code to test this in general, but so far no cigar. This is my code:
the html:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>xxx</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="Test_Main" class="main">
<asp:ScriptManager id="ScriptManager1" runat="server"></asp:ScriptManager>
<table border="0" cellpadding="0" width="970px" >
<tr>
<td rowspan="1" vertical-align="top" style="height: 80px">
<div class="header">
<h1><asp:Label id="lblOrder" width="930px" runat="server" Text="Order" style="margin-left: 10px"></asp:Label></h1>
</div>
</td>
</tr>
<tr>
<td rowspan="1" vertical-align="top" class="auto-style1" width="970px" >
<asp:UpdatePanel id="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<uc2:TestOrder id="TestOrder1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
<div>
<asp:Button ID="Testbutton" runat="server" Text="Fenstertest" OnClick="Button_Test_Click"/>
</div>
</div>
<cc1:ModalPopupExtender ID="Testpanel" runat="server" BackgroundCssClass="ModalBackground" Enabled="true" TargetControlID="Testbutton"
PopupControlID="Panel1" CancelControlID="btnClose" BehaviorID="ModalBehaviourID">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPanel" Style="display: none">
Test modal<br />
<asp:Button ID="btnClose" runat="server" Text="Close Modal" />
</asp:Panel>
</form>
</body>
</html>
and here is the code behind:
protected void Button_Test_Click(object sender, EventArgs e)
{
Testpanel.Show();
}
When I debug through the code, I see that the show method is executed, but then nothing is visible on the screen. When I execute without debugging, I see a short flickering, but no modal window.
My other page still works properly with that same method, this drives me crazy.
Does anyone see what is wrong here? Thanks for your help.
I get this error when ever I try to load this web page:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" th:href="#{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="#{/css/main.css}"/>
<title>Competition</title>
</head>
<body>
<div>
<p th:text="'Name: ' + ${competition.name}" />
<p th:text="'Date: ' + ${competition.date}" />
<p th:text="'Venue: ' + ${competition.Venue}" />
<div th:if="${competition.competitors != null}">
<h3>Competitors</h3>
<ul>
<li th:each="item : ${competition.competitors}" th:text="${item}"></li>
</ul>
</div>
<h4>Add Competitor.</h4>
<form action="#" th:action="#{/competitions/{id}(id=${competition.id})}" th:object="${email}" method="post">
<p>User email: <input type="text" th:field="*{text}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
</div>
<p th:text="${competition.id}"></p>
</body>
</html>
I added the org.unbescape dependency to my pom.xml.
I started getting this error when I added the the URL to the form
(This line:)
th:action="#{/competitions/{id}(id=${competition.id})}"
It looks like you are using a older version of org.unbescape. The class UriEscape was introduced in versin 1.1.0. Ref here
Can you try by upgrading the org.unbescape version to 1.1.1 as follows?
<dependency>
<groupId>org.unbescape</groupId>
<artifactId>unbescape</artifactId>
<version>1.1.1.RELEASE</version>
</dependency>
I have a testt.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.thymeleaf.org ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Advanced Test</title>
</head>
<body>
<form action="#" th:action="#{getClasses}" method="GET">
<br />
<br />
<p style="margin-left: 35px">Submit fully classified package names</p>
Class Name: <input type="text" name="class_name" size="90px"></input>
<input type="text" name="classes" size="90px" th:field="${foo}"></input>
<input type="submit" value="Submit" ></input> <br />
</form>
</body>
</html>
And have the following code in the controller method:
model.addAttribute("foo", "foo");
return "testt";
Why "foo" is not populating in the html? If instead of String i add an object and try to get its variable it works fine.
i think if you want use it like this you should use th:value instead of th:field
You need this th:field=__${foo}__,
have a look at the doc here:http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
I want some static pages of application to be rendered from XML i.e. i am planning to have a base page and xml containing structure of the page and xslt which will be transforming this xml to html and at runtime i will be rendering this html to my view and displaying this view
Is there any way/ example for doing the same. Please help
Here is the sample xml
<!DOCTYPE html>
<html>
<head>
<title>Create</title>
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript" />
<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-ui.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.min.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript" />
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript" />
</head>
<body>
<div id="menucontainer">
<ul id="menu">
<li>
Rutu
</li>
<li>
Employee
</li>
</ul>
</div>
<h2>Create</h2>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript" />
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript" />
<form action="/Employee/Create" method="post">
<fieldset>
<legend>EmployeeDetailsModel</legend>
<div class="editor-label">
<label for="EmpName">EmpName</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="EmpName" name="EmpName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EmpName" data-valmsg-replace="true" />
</div>
<div class="editor-label">
<label for="DeptId">DeptId</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field DeptId must be a number." data-val-required="The DeptId field is required." id="DeptId" name="DeptId" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DeptId" data-valmsg- replace="true" />
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
</form>
<div>
Back to List
</div>
There is a good blog post here that describes how to create an HTML Helper to render the XSLT in a view. You just call the helper class from your view passing in the path to the XSLT and the XML. I have modified this helper so that you can also pass the XSLT and XML as strings to achieve the same results.
MvcContrib project provides an XSLT based view engine http://mvccontrib.codeplex.com/releases - I would suggest to check it out.
I'm experimenting with jQuery Mobile and have run into a problem on my Windows Phone 7 browser.
Whenever I add a button to the page, either <input type='button'> or <button>, the whole page doesn't render in the WP7 IE.
When I view the same page in IE7 (using IETester) I get a Script Error "Object doesn't support this property or method" Line 17 Char 45703, and then the page doesn't render.
Here's the html that's generated for my page:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<title>
iplan
</title></head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>
mobile login</h1>
</div>
<div data-role="content">
ello
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIzNjAxMDE2M2Rk5Yr3L4N9Yyh0TZrUHAh3ZX6rJck=" />
</div>
<label for="ctl00_ContentPlaceHolder1_txtUsername" id="ctl00_ContentPlaceHolder1_lblUsername">Username</label>
<input name="ctl00$ContentPlaceHolder1$txtUsername" type="text" id="ctl00_ContentPlaceHolder1_txtUsername" />
<br />
<label for="ctl00_ContentPlaceHolder1_txtPassword" id="ctl00_ContentPlaceHolder1_Label1">Password</label>
<input name="ctl00$ContentPlaceHolder1$txtPassword" type="password" id="ctl00_ContentPlaceHolder1_txtPassword" />
<br />
<input type="submit" name="ctl00$ContentPlaceHolder1$btnLogin" value="Login" id="ctl00_ContentPlaceHolder1_btnLogin" />
<span id="ctl00_ContentPlaceHolder1_Label2">Boo</span>
</form>
</div>
<div data-role="footer">
© 2011</div>
</div>
</body>
</html>
When I remove that <input type="submit" ... the page renders correctly.
Any ideas?
I had the same problem. Turned out I was using an out of date version of jQuery.
Solved this by using the most recent version.