Has anyone got any idea how to prevent the HTML code added into Umbraco macros filtering out the closing input tag. I.e. using RVContactForm, the following is rendered:
Thanks for the response - I'm more than happy to take your advice onboard and keep this topic rather than the new more general one.
When I make the change that you have suggested, the webpage completely breaks. I have posted my XSLT below to see if you are able to offer any further advice?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> <script type="text/javascript" src="/scripts/json2.js"></script> <script type="text/javascript" src="/scripts/RVContactForm.js"></script> <script type="text/javascript"> //custom error messages for this form fields. we defined them here and not in the js file because we need to use the dictionary items from the server.
var errName = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.name")' />";
var errCompany = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.company")' />"; var errDigits = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.digits")' />"; var errPhone = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.phone")' />"; var errorEmail = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.email")' />"; var errSubject = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.subject")' />"; var errMessage = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.message")' />"; var thankYouHeaderText= "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.thankYouHeaderText")' />"; var thankYouMessageText = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.thankYouMessageText")' />"; var failureHeaderText = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.failureHeaderText")' />"; var failureMessageText = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.failureMessageText")' />";
/* // custom error messages for this plugin. // change the text if you adding new form fields from different types (date, creditcard etc).
jQuery.extend(jQuery.validator.messages, { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", number: "Please enter a valid number.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: jQuery.validator.format("Please enter no more than {0} characters."), minlength: jQuery.validator.format("Please enter at least {0} characters."), rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."), range: jQuery.validator.format("Please enter a value between {0} and {1}."), max: jQuery.validator.format("Please enter a value less than or equal to {0}."), min: jQuery.validator.format("Please enter a value greater than or equal to {0}.") }); */ </script>
The main issue with switching XSLT to output method "xml" is that it will apply the XML rules to all elements/tags ... meaning that empty-tags will be self-closed!
HTML like...
<script type="text/javascript"></script>
... will be come ...
<script type="text/javascript" />
Which doesn't work in most web-browsers!
Soooooo, if you really want to have valid XHTML output, then try this XSLT... it's a biggie!
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp " ">
]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="msxml umbraco.library">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
<xsl:text disable-output-escaping="yes"><![CDATA[
<link href="/css/RVContactForm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript" src="/scripts/json2.js"></script>
<script type="text/javascript" src="/scripts/RVContactForm.js"></script>
]]></xsl:text>
<script type="text/javascript">
// custom error messages for this form fields. we defined them here and not in the js file because we need to use the dictionary items from the server.
var errName = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.name")' />";
var errCompany = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.company")' />";
var errDigits = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.digits")' />";
var errPhone = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.phone")' />";
var errorEmail = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.email")' />";
var errSubject = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.subject")' />";
var errMessage = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.error.message")' />";
var thankYouHeaderText= "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.thankYouHeaderText")' />";
var thankYouMessageText = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.thankYouMessageText")' />";
var failureHeaderText = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.failureHeaderText")' />";
var failureMessageText = "<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.failureMessageText")' />";
/*
// custom error messages for this plugin.
// change the text if you adding new form fields from different types (date, creditcard etc).
jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
*/
</script>
<xsl:text disable-output-escaping="yes"><![CDATA[<div id="ServerMsgContainer" style="display: none;"><div id="ServerMsgHeader"></div><div id="ServerMsgMessage"></div></div>]]></xsl:text>
<form id="ContactForm" runat="server">
<div class="ContactForm">
<div class="ContactFormRow">
<div class="ContactFormCol">
<label for="name">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.name")' />
</label>
<span>*</span>
<input type="text" class="ContactInputReg" name="name" id="name" autocomplete="off" />
</div>
</div>
<div class="ContactFormRow">
<div class="ContactFormCol">
<label for="company">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.company")' />
</label>
<input type="text" class="ContactInputReg" name="company" id="company" autocomplete="off" />
</div>
</div>
<div class="ContactFormRow">
<div class="ContactFormCol">
<label for="phone">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.phone")' />
</label>
<span>*</span>
<input type="text" class="ContactInputReg" name="phone" id="phone" autocomplete="off" />
</div>
</div>
<div class="ContactFormRow">
<div class="ContactFormCol">
<label for="email">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.email")' />
</label>
<span>*</span>
<input type="text" class="ContactInputReg" name="email" id="email" autocomplete="off" />
</div>
</div>
<div class="ContactFormRow">
<div class="ContactFormCol">
<label for="subject">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.subject")' />
</label>
<span>*</span>
<select class="ContactInputReg" id="subject" name="subject">
<option value="General">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.subject.dropdown.option1")' />
</option>
<option value="Sales">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.subject.dropdown.option2")' />
</option>
<option value="Support">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.subject.dropdown.option3")' />
</option>
</select>
</div>
</div>
<div class="ContactFormRow">
<div class="ContactFormCol">
<label for="message">
<xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.message")' />
</label>
<span>*</span>
<xsl:text disable-output-escaping="yes"><![CDATA[<textarea cols="4" class="ContactInputReg" rows="8" name="message" id="message"></textarea>]]></xsl:text>
</div>
</div>
<div class="ContactFormRow">
<div class="ContactFormCol">
<input id="submit" type="button" value="{umbraco.library:GetDictionaryItem('RV-ContactForm.labels.submit')}" title="{umbraco.library:GetDictionaryItem('RV-ContactForm.labels.submit.title')}" class="button" />
</div>
</div>
</div>
</form>
</xsl:template>
</xsl:stylesheet>
I have wrapped the empty-tags in <xsl:text> elements ... so that they are preserved. Hopefully I got everything... but best to double-check yourself! ;-)
My code is a bit irrelevant as I have made so many modifications to your original version, but if you'd like to post yours I'll try to help spot any problems for you.
It seems a bit of a shame to leave it like it is when it produces code that doesn't conform to W3C.. But then there are other changes people will make to make anyway if validation is important to them, such as moving the css include link.
Maybe keep the output mode as HTML, but make the conformance related validation changes as a bit of a compromise between the two?
every version i try to make this package better and i will seriously consider to do that in the next version. by the way, in the next release, i will include also the change with the language (the current language id will be sent to the web service to display the correct dictionary items).
@Martin - just a comment - HTML without closing tags are valid dependant on the doctype declaration you use for your documents. If you write XHTML then tags/elements must be closed. If you write HTML 4.01 or even HTML5 they don't have to be closed.
I must admit that I prefer closed tags though. But it's not neccasarily invalid not to close them ;-) It depends.
Disappearing close input tags
Has anyone got any idea how to prevent the HTML code added into Umbraco macros filtering out the closing input tag. I.e. using RVContactForm, the following is rendered:
Where in the macro the input tag clearly has the correct /> closing tag.
Ideas?
Martin
sorry, but i dont sure that i understand your question
Look at the source I posted - the input tag ends ">" without the slash - it should be "/>" to be valid XHTML?
Martin
o.k i understand.
i guess its not related to this package specifically, so maybe its better to ask it in the XSLT forum.
Thanks,
Eran.
Hi Martin,
In the "RVContactForm.xslt", you'll need to change the output method from "html" to "xml", like so:
Cheers, Lee.
PS. I'll delete your other post about this - as I think your question is still relevant to the RV Contact Form package.
Hi Lee,
Thanks for the response - I'm more than happy to take your advice onboard and keep this topic rather than the new more general one.
When I make the change that you have suggested, the webpage completely breaks. I have posted my XSLT below to see if you are able to offer any further advice?
Appreciate any help you can offer.
Happy 2011 everyone :-)
Martin
Hi Martin,
The main issue with switching XSLT to output method "xml" is that it will apply the XML rules to all elements/tags ... meaning that empty-tags will be self-closed!
HTML like...
... will be come ...
Which doesn't work in most web-browsers!
Soooooo, if you really want to have valid XHTML output, then try this XSLT... it's a biggie!
I have wrapped the empty-tags in <xsl:text> elements ... so that they are preserved. Hopefully I got everything... but best to double-check yourself! ;-)
Cheers, Lee.
hi lee, thanks for the help.
i'm the package author. do you think that i should add this changes to the official release?
Hi Eran
I definately think you should update the package with this since it could possibly confuse a few other people as well :-)
/Jan
Thanks, i will, in the next release.
i checked this - and after that i wrap the js includes - they dont function.
It took me a while to get it working, but I've just finished.
You have to be careful not to wrapper anything that has real XSL content in (e.g. the inputs and the inline js).
Thanks Lee.
Martin
it would be great if you can share here working code so i add it to the next version of this package.
Thanks!
My code is a bit irrelevant as I have made so many modifications to your original version, but if you'd like to post yours I'll try to help spot any problems for you.
Martin
my code is exactly like the code that lee attached in the previous page of this post. (the original code from the package).
Thanks.
Perhaps try making the changes one bit at a time..?
I'm using:
Hi Eran,
To be honest, if it works in regular "html" output mode, I'm tempted to say keep it as is.
Although I know a lot of people prefer the "xml" output - for XHTML compliance.
I've taken another look at the XSLT, but can't see why the JavaScript includes would cause an issue... unless I'm missing something obvious?
Let me know, I'll try to help out where I can.
Cheers, Lee.
i decided to keep it as it is. i think is more simple like this and maybe some of the people will not understand why i do that.
Thanks.
It seems a bit of a shame to leave it like it is when it produces code that doesn't conform to W3C.. But then there are other changes people will make to make anyway if validation is important to them, such as moving the css include link.
Maybe keep the output mode as HTML, but make the conformance related validation changes as a bit of a compromise between the two?
Martin
(That said, this is the best contact form script I found simply because it uses a macro to embed the form and sends the message via ajax.)
:-)
Martin
every version i try to make this package better and i will seriously consider to do that in the next version.
by the way, in the next release, i will include also the change with the language (the current language id will be sent to the web service to display the correct dictionary items).
Thanks!
Eran.
@Martin - just a comment - HTML without closing tags are valid dependant on the doctype declaration you use for your documents. If you write XHTML then tags/elements must be closed. If you write HTML 4.01 or even HTML5 they don't have to be closed.
I must admit that I prefer closed tags though. But it's not neccasarily invalid not to close them ;-) It depends.
/Jan
is working on a reply...