> 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](http://www.codereview.stackexchange.com/help/on-topic) 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](https://codereview.meta.stackexchange.com/a/5421/23788), 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](https://codereview.meta.stackexchange.com/a/5422/23788), for the heck of it. It's still too early for the July [tag: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 <kbd>ENTER</kbd> in the title box.

> **NOTE**: The code uses `String.includes`, which may not be available in your browser. See the [accepted answer](http://codereview.stackexchange.com/a/93403/23788) for details.

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    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 == undefined) {
        return;
      }
      
      popup.parentNode.removeChild(popup);
    }

    function getWarningDiv() {
      "use strict";
      
      var popup = document.createElement("div");  
      popup.className = "message message-error message-dismissable";
      popup.setAttribute("style", "max-width: 270px; min-width: 270px; position: absolute; top: 32px; left: 378px; display: block;");
      popup.addEventListener("click", function(event) { clearWarning(); });
      
      var tooltip = document.createElement("div");
      tooltip.className = "message-inner message-tip message-tip-left-top";
      
      popup.appendChild(tooltip);
      
      var tipText = document.createElement("div");
      tipText.title = "close this message (or hit Esc)";
      tipText.className = "message-close";
      tipText.textContent  = "×";
      
      tooltip.appendChild(tipText);
      
      var msg = document.createElement("div");
      msg.className = "message-text";
      msg.setAttribute("style", "padding-right: 35px;");
      msg.textContent = "Wait! If your code does not work as intended, this question is off-topic!";
      
      popup.appendChild(msg);
      return popup;
    }

<!-- language: lang-css -->

    body {
      font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
      font-size: 13px;
      line-height: 1.3em;
      color: #222;
      background: #fff;
      min-width: 1030px;
    }

    .ask-title-table {
      width: 668px;
      height: 44px;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border-color: grey;
    }

    .ask-title-cell-key {
      width: 40px;
    }

    #title {
      width: 498px;
    }

    .form-item label {
      display: block;
      font-weight: bold;
      padding-bottom: 3px;
    }

    input[type=text], input[type=url], input[type=email], input[type=tel], textarea {
      font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
      background: #fff;
      color: #444;
      border: 1px solid #ccc;
      font-size: 14px;
      padding: 8px 10px;
    }

    .message.message-error.message-dismissable {
      cursor: pointer;
    }

    .message.message-error {
      z-index: 1;
      display: none;
      color: #fff;
      background-color: #c04848;
      text-align: left;
    }

    .message.message-error .message-text {
      padding: 15px;
    }

    .message.message-error .message-close {
      padding: 2px 6px 3px 6px;
      font-family: Arial,sans-serif;
      font-size: 16px;
      font-weight: normal;
      color: #fcb2b1 !important;
      line-height: 1;
      float: right;
      border: 1px solid rgba(255,255,255,0.2);
      margin-top: 8px;
      margin-right: 8px;
    }

    .message.message-error .message-tip-left-top:before {
      top: 0;
      left: -9px;
      border-top: 9px solid #c04848;
      border-left: 9px solid transparent;
    }

    .message.message-error .message-tip:before {
      content: "";
      position: absolute;
    }

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <html>
      <head>
          <title>Ask a Question - Code Review Stack Exchange</title>
      </head>
      <body>
        <form>
        <div id="question-form">
          <div class="form-item ask-title">
            <table class="ask-title-table">
              <tbody>
                <tr>
                  <td class="ask-title-cell-key">
                    <label for="title">Title</label>
                  </td>
                  <td class="ask-title-cell-value">
                    <input id="title" name="title" type="text" maxlength="300" tabindex="100" placeholder="State the task that your code accomplishes. Make your title distinctive." class="ask-title-field" data-min-length="15" data-max-length="150" autocomplete="off" onkeypress="return validateKey(event)"/>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- warning should be inserted here -->
        </div>
        </form>
      </body>
    </html>

<!-- end snippet -->

---

Again, the CSS and HTML aren't exactly mine - they're merely an excuse for the JavaScript, which I'd like to improve. Also, did I overlook any blatant false positives?