How to make a simple jQuery button in XHTML strict with no form postback?

Question

I am making a site with DOCTYPE XHTML Strict and it complains if I have an input button or button element outside a form.

So I put it in a form and it complains that I don't have an action attribute.

So I put in an action attribute but then the buttons postback to the page, which I don't want.

How can I just have a normal jQuery button with bound event in XHTML strict?

<form action="">
    <div>
     <input id="button1" type="button" value="highlight it"  /> 
     <input id="button2" type="button" value="toggle title" />
     <p>here is another paragraph</p> 
    <div id="show1">What color is the sky?</div>
    <div id="answer1">blue</div>
     <button id="button1">Show Answer</button>
    </div>
</form>

Answer 1

This is why you shouldn't use xhtml strict. If the only reason you do something is to please the validator, then the validator is wrong. Use html5 instead, and do it the way you did originally, ie no form.

Answer 2

The trick is to return false from your click() handler, like so:

$("#button_id").click(function() { /* do stuff.. */ return false; })

Answer 3

I am making a site with DOCTYPE XHTML Strict and it complains if I have an input button or button element outside a form.

Nope, it's perfectly acceptable to have an input/button with no form. Indeed, there is no way in DTD to express the limitation that an input must have a form ancestor, so XHTML couldn't ban it if it wanted to. If you had a validation error, it wasn't that. It was probably this:

<button id="button1">Show Answer</button>

You've already got an element with id="button1". ids must be unique.

When you aren't going to submit a form, you generally shouldn't include the form element. However there is one case you need to: to group a set of radio inputs that have the same control name. If they are left with no form ancestor they don't know they're connected, so browsers tend not to make them exclusive.

In this case, the usual idiom is to set the required action attribute to "#", and add an onsubmit handler to the form that always returns false so that when JS is enabled the form will never be submitted. Don't put this return false on the buttons themselves, as the form may be submitted by other means than a button click: in particular, an Enter keypress.

So I put in an action attribute but then the buttons postback to the page, which I don't want.

An <input type="button"> won't submit the form. <button> shouldn't either, but it does in IE due to a bug where the browser uses the wrong default type value. So you have to write <button type="button">.