在 HTML 表单上显示错误消息，然后在用户更正错误后删除此消息答案

【问题标题】：Display an error message on an HTML form, then, remove this message after user corrects error在 HTML 表单上显示错误消息，然后在用户更正错误后删除此消息
【发布时间】：2016-03-29 13:09:21
【问题描述】：

我正在尝试使用 HTML5 和基本 JavaScript 构建一个简单的应用程序。我让它工作，但我在做一件简单的事情时遇到了麻烦（至少在我使用过的其他语言中很简单）。这是我当前的代码：

<!DOCTYPE html>
<html>
        <head>
            <title>JS Test</title>
            <meta charset="utf-8" />
        </head>

        <script>
            function isTrackValid(track_a, track_b) {
                if(track_a > 200.0 || track_a < 0.0) {
                    return "Number must be between 0 BPM and 200 BPM";
                }
                if(track_b > 200.0 || track_b < 0.0) {
                    return "Number must be between 0 BPM and 200 BPM";
                }
                return "";
            }

            function calculate(track_a, track_b) {
                if(track_a > track_b) {
                    return ((track_a - track_b) / track_a) * 100;
                } else if(track_a < track_b) {
                    return ((track_a - track_b) / track_b) * 100;
                } else {
                    return 0.0;
                }
            }

            function main() {
                track_a = input_a.valueAsNumber;
                track_b = input_b.valueAsNumber;

                var message = isTrackValid(track_a, track_b);
                if(message !== "") {
                    $('#error_message').text(message);
                } else {
                    var result = calculate(track_a, track_b);
                    return result.toFixed(2);
                }
            }
        </script>
        <body>
            <header>
                <h1>JS Test</h1>
            </header>
            <form onsubmit="return false" oninput="o.value=eval(main());">
                Track A: <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A"><br/>
                Track B: <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B"><br/>
                <br />
                <div id="error_message"></div>
                Output: <output name="o" step="0.01" for="a b"></output>
            </form>
        </body>
</html>

我想要的是，如果用户输入 0 到 200 之间的数字，我的<output> 就会显示出来。这个output 将具有根据上面的 javascript 计算的正确答案。如果用户输入负数或大于 200 的数字，那么我希望将错误放在 <output> 字段中。

使用当前代码（以及 StackOverflow 上的答案导致的 <div>），当发生错误时，它会超出 Output。但是，当用户输入有效数字时，此错误会一直存在并且永远不会消失。

我想知道我是否可以让错误消失？或者如果它无效，我可以做些什么让它转到Output？

【问题讨论】：

@GopsAB 通过 JSFiddle 执行此操作似乎没有显示错误：jsfiddle.net/jthjzsjx
你是否包含了 jquery for _ $('#error_message').text(message);_ ?
@Alex 你在使用 JQuery 吗？如果有，你添加了吗？
@Niklesh :o 我什至没有意识到它是 JQuery。我最初在 StackOverflow 上问了一个关于仅使用 javascript 进行错误处理的问题。
我知道没有（现在可能存在） HTML 命令。所以我要说应该是一个DIV（即：
）。然后，您可以显示/隐藏 DIV，也可以在不想看到时将其移动到 -5000、-5000 之类的位置。此外，您需要将 z-index 设置为除零（0）以外的其他值，这是其他所有内容所在的层。（即：z-index:1 将覆盖网页的其余部分。）

标签： javascript html forms validation

【解决方案1】：

如果值有效，您不会删除 error 消息。另请注意，您可以在[type = number] 元素上使用JavaScript Event Binding 来绑定事件，而不是使用eval。

试试这个：

function isTrackValid(track_a, track_b) {
  if (track_a > 200.0 || track_a < 0.0) {
    return "Number must be between 0 BPM and 200 BPM";
  }
  if (track_b > 200.0 || track_b < 0.0) {
    return "Number must be between 0 BPM and 200 BPM";
  }
  return "";
}

function calculate(track_a, track_b) {
  if (track_a > track_b) {
    return ((track_a - track_b) / track_a) * 100;
  } else if (track_a < track_b) {
    return ((track_a - track_b) / track_b) * 100;
  } else {
    return 0.0;
  }
}

function main() {
  track_a = input_a.valueAsNumber;
  track_b = input_b.valueAsNumber;
  var message = isTrackValid(track_a, track_b);
  if (message !== "") {
    $('#error_message').text(message);
  } else {
    $('#error_message').text(message);
    var result = calculate(track_a, track_b);
    return result.toFixed(2);
  }
}

var elems = document.querySelectorAll('[type="number"]');
[].forEach.call(elems, function(elem) {
  elem.addEventListener('input', main);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form onsubmit="return false">
  Track A:
  <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A">
  <br/>Track B:
  <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B">
  <br/>
  <br />
  <div id="error_message"></div>
  Output:
  <output name="o" step="0.01" for="a b"></output>
</form>

Fiddle here

【讨论】：