CODEWITHSUNDEEP
htmlxsltcheckboxxslt-2.0forms
user1279780
user1279780

Reputation: 99

How to show text if checkbox is NOT ticked in XSLT

I am trying to use XSLT file to show a red text error message if the checkbox has not been ticked (once I click on the submit button on my form), this is my current (and I think relevant part) code in a form:

<div id="confcontent">
<xsl:apply-templates select="$model/validationMessages/allMessages" mode="validationMessageList" />
     <div class="formblock">
        <form action="{$model/@formAction}" method="post" onSubmit="return checkValidation();">
            <div class="fieldSet">
                <input type="checkbox" name="managerconfirmation" onclick="(input/@managerconfirmation" />
                <span>Random text next to checkbox is entered here</span><br />
            </div>

            <div class="fieldSet">
              <span>I want this message to show up in red if I do not click on the checkbox</span>
            </div>
           <div class="fieldSet">
              <input class="enterbtn" type="submit" value="Enter" />
              <div class="clearboth">&#160;</div>
           </div>
        </form>

     </div>
</div>
</xsl:template>

Do I use an xsl: if test function to test if checkbox is ticked and if so, how and where in this line of code do I do that? Many thanks and appreciation for your assistance if you understand what I am trying to say and if you can help me solve this problem.

Upvotes: 0

Views: 722

Answers (1)

Springie
Springie

Reputation: 718

You have 2 options, either client-side or server-side (or both), however you haven't provided any information on what language you are using server-side and how it all ties together.

So with Javascript the quickest way would be to give the checkbox and error message an id, then reference id e.g.

function checkValidation()
{
   if(!document.getElementById('myCheckbox').checked)
   {
      document.getElementById('errorMessage').style.display = 'block';
      document.getElementById('errorMessage').style.color = '#CC0000';
      return false;
   }

   return true;
}

For a more universal solution you could traverse the dom and do it by class name to find the relevant error message div if you wanted, it would be slower though.

Upvotes: 2

Related Questions