html button not clickable without being disabled

Question

Since IE (<8?) does not let me change the text color of a disabled button, and introduces a horrible shadow (embossed effect), I want to mimic the behaviour of being a disabled button. This button will be disabled if there are input errors on the form.

Instead of disabling I can change the class in JS to darken the button etc when form validation takes place. What I also want to do is make it unclickable as well so that the user can not submit the form. (How) can I do this?

Thanks

Answer 1

IE10+ & Modern Browsers Answer

This won't solve your issue since you're using < IE10, but for those who are using modern browsers and to answer the original question:

html button not clickable without being disabled

...this works simply & elegantly:

.no-click {
    pointer-events: none;
}

Just add this class to your UI:

<button class="no-click">

Answer 2

<form onSubmit="return validate(this)"

Just return false to stop submission

you can add the function in the window.onload too:

window.onload=function() {
  document.getElementsByTagName("form")[0]).onsubmit=function() {
    return validate(this);
  }
}
function validate(theForm) {
  // if not valid
  return false;

  // else
  return true;
}

If you want to adhere to the newest best practices, you will use addEventListener or attachEvent or jQuery bind

Comment From @BrendanEich :

@mplungjan onclick of submit just falls out of that being a button; form onsubmit is clearly better.