When "How To Ask" is too subtle

This is the first JavaScript code I've ever written, alert("hello, world!"); aside.

This site is closing quite a lot of questions because people won't read the rulebook or pay attention to the How To Ask panel that's displayed as you're entering your question title - almost 60% of closed questions involve broken code, so I suggested to pop a red in-your-face warning when a user is about to ask a blatantly off-topic question with broken code.

Not knowing whether Stack Exchange would go forward with something like that, I suggested we implement one ourselves, for the heck of it. It's still too early for the July community-challenge, so this isn't an entry... well it would be, but I just couldn't wait to try something, so here it goes.

I've "stolen" some HTML and CSS from the Ask Question page, adapted it a little bit to fit the Stack Snippet box, and proceeded to implement the JavaScript code to make it work.

Go ahead, try it! The script is triggered when you hit ENTER in the title box.


NOTE: The code uses String.includes, which may not be available in your browser. See the accepted answer for details.



`function validateKey(e) {
"use strict";
if (e.keyCode == 13) {
var field = document.getElementById("title");
if (!validateTitle(field)) {
showWarning();
}
else {
clearWarning();
}
}
}

function validateTitle(titleField) {
"use strict";
var title = titleField.value;
return !title.includes("bug")
&& !title.includes("issue")
&& !title.includes("t work") // catches won't work, isn't working, etc.
&& !title.includes("s wrong") // catches what's wrong, what is wrong
&& !title.includes("fix")
&& !title.includes("why");
}

function showWarning() {
"use strict";
var msg = getWarningDiv();
document.getElementsByTagName("table")[0].appendChild(msg);
}

function clearWarning() {
"use strict";
var popup = document.getElementsByClassName("message-dismissable")[0];
if (popup == u

String.includes() is part of the experimental ECMAScript 6 language proposal. Therefore, you cannot rely on it being available in browsers. On browsers that do not support String.includes(), your script does nothing — it just leaves an error in the JavaScript console, if one cares to look there. That is one of the dangers of JavaScript programming: the page just breaks completely due to one mistake, even if it works on your own browser.

The conservative approach, title.indexOf(…) >= 0, is definitely recommended.

Other than that, your code looks pretty good. However, since you have included jQuery in your Stack Snippet, I am puzzled by why you didn't make use of it. Much of this code would be simplified.

More jQuery, please!

StackExchange Code Review Q#93391, answer score: 31