Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Martin 48 posts 69 karma points
    Dec 31, 2010 @ 19:02
    Martin
    0

    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:

    <div class="ContactFormRow">
    <div class="ContactFormCol"><label for="email">Email</label><span>*</span><input type="text" class="ContactInputReg" name="email" id="email" autocomplete="off"></div>
    </div>

    Where in the macro the input tag clearly has the correct /> closing tag.

    Ideas?

    Martin

  • Eran 292 posts 436 karma points
    Dec 31, 2010 @ 19:38
    Eran
    0

    sorry, but i dont sure that i understand your question

  • Martin 48 posts 69 karma points
    Dec 31, 2010 @ 19:45
    Martin
    0

    Look at the source I posted - the input tag ends ">" without the slash - it should be "/>" to be valid XHTML?

    Martin

  • Eran 292 posts 436 karma points
    Dec 31, 2010 @ 20:07
    Eran
    0

    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.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jan 01, 2011 @ 13:24
    Lee Kelleher
    1

    Hi Martin,

    In the "RVContactForm.xslt", you'll need to change  the output method from "html" to "xml", like so:

    <xsl:output method="xml" omit-xml-declaration="yes"/>

    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.

  • Martin 48 posts 69 karma points
    Jan 01, 2011 @ 13:32
    Martin
    0

    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?

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> <!ENTITY linebreak "&#x0D0A;">]>
    <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" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:Cultiv.MediaCache="urn:Cultiv.MediaCache" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
     exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets Cultiv.MediaCache tagsLib BlogLibrary ">

    <xsl:output method="html" omit-xml-declaration="yes"/>
    <xsl:param name="currentPage"/>
    <xsl:template match="/">
    <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>
    <div id="ServerMsgContainer" style="display: none;">
          <div id="ServerMsgHeader"></div>
        </div>
        <form id="ContactForm" runat="server">
          <div class="ContactForm">
            <input type="hidden" name="subject" id="subject" value="Ask the Xpert" />
            <input type="hidden" name="phone" id="phone" value="N/A" />
            <input type="hidden" name="company" id="company" value="N/A" />
            <input type="hidden" name="node" id="node" value="{$currentPage/@id}" />
            <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="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="message"><xsl:value-of select='umbraco.library:GetDictionaryItem("RV-ContactForm.labels.message")' /></label>
                <span>*</span>
                <textarea cols="4" class="ContactInputReg" rows="3" name="message" id="message"></textarea>
              </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>

    Appreciate any help you can offer.

    Happy 2011 everyone :-)

    Martin

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jan 01, 2011 @ 13:43
    Lee Kelleher
    0

    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...

    <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 "&#x00A0;">
    ]>
    <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! ;-)

    Cheers, Lee.

  • Eran 292 posts 436 karma points
    Jan 01, 2011 @ 14:39
    Eran
    0

    hi lee, thanks for the help.
    i'm the package author. do you think that i should add this changes to the official release?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Jan 01, 2011 @ 15:18
    Jan Skovgaard
    0

    Hi Eran

    I definately think you should update the package with this since it could possibly confuse a few other people as well :-)

    /Jan

  • Eran 292 posts 436 karma points
    Jan 01, 2011 @ 15:22
    Eran
    1

    Thanks, i will, in the next release.

  • Eran 292 posts 436 karma points
    Jan 01, 2011 @ 17:19
    Eran
    0

    i checked this - and after that i wrap the js includes - they dont function.

  • Martin 48 posts 69 karma points
    Jan 01, 2011 @ 17:36
    Martin
    0

    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

  • Eran 292 posts 436 karma points
    Jan 01, 2011 @ 17:45
    Eran
    0

    it would be great if you can share here working code so i add it to the next version of this package.

    Thanks!

  • Martin 48 posts 69 karma points
    Jan 01, 2011 @ 17:53
    Martin
    0

    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

  • Eran 292 posts 436 karma points
    Jan 01, 2011 @ 18:03
    Eran
    0

    my code is exactly like the code that lee attached in the previous page of this post. (the original code from the package).

    Thanks.

  • Martin 48 posts 69 karma points
    Jan 01, 2011 @ 21:12
    Martin
    0

    Perhaps try making the changes one bit at a time..?

    I'm using:

    <xsl:text disable-output-escaping="yes"><![CDATA[
    <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>
  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Jan 01, 2011 @ 23:41
    Lee Kelleher
    0

    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.

  • Eran 292 posts 436 karma points
    Jan 02, 2011 @ 14:22
    Eran
    0

    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.

  • Martin 48 posts 69 karma points
    Jan 02, 2011 @ 14:33
    Martin
    0

    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

  • Martin 48 posts 69 karma points
    Jan 02, 2011 @ 14:34
    Martin
    0

    (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

  • Eran 292 posts 436 karma points
    Jan 02, 2011 @ 14:38
    Eran
    1

    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.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Jan 02, 2011 @ 14:58
    Jan Skovgaard
    0

    @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

Please Sign in or register to post replies

Write your reply to:

Draft