简单验证拒绝验证 textarea

Question

验证正在输入字段上，但它拒绝在 textarea 上这样做。为什么？当我将 textarea 的长度记录到控制台时，它说 document.guest 未定义......但在我看来，这显然不是这种情况，因为它在输入字段上工作。

  <script type="text/javascript">
  function fcheck() {
    if (document.guest.name.value.length < 1) {
      alert("Du musst einen Namen eingeben!");
      return false;
    }
    if (document.guest.email.value.length < 1) {
      alert("Du musst eine Email eingeben!");
      return false;
    }
    if (document.guest.message.value.length < 1) {
      alert("Du musst eine Nachricht eingeben!");
      return false;
    }
    return true;
  }
  </script>

<div id="test2" class="col-md-6 form-group">
      <form action="addcomment.php" method="post" name="guest" onSubmit="return fcheck();">

        <div class="textform">
            <p>Name:
            <input type="text" name="name" class="form-control"/>
            </p>
        </div>

        <div class="textform">
            <p>E-Mail:
            <input type="text" name="email" class="form-control"/>
            </p>
        </div>

        <div class="textform">
            <p>Nachricht(Maximal 300 Zeichen):</p>
            <textarea cols="50" name="message" rows="10" class="form-control status-box" maxlength="300"> </textarea>
        </div>
        <br>
        <div class="pull-left">
            <p class="counter">300</p>
        </div>

        <div id="textarea" class="pull-right">
            <input type="submit" value="Nachricht abschicken" class="btn btn-primary" />
        </div>
      </form>
    </div>

Answer 1

首先，您需要使用preventDefault 防止form 默认操作。所以在 html 中替换这行代码：（更多信息：JavaScript code to stop form submission )

onSubmit="return fcheck();"

与：

onSubmit="event.preventDefault(); fcheck();"

其次，在你的 javascript 中：

<script type="text/javascript">
    function fcheck() {
        if (document.forms.guest.name.value.trim().length < 1) {
            alert("Du musst einen Namen eingeben!");
            return false;
        }
        if (document.forms.guest.email.value.trim().length < 1) {
            alert("Du musst eine Email eingeben!");
            return false;
        }
        if (document.forms.guest.message.value.trim().length < 1) {
            alert("Du musst eine Nachricht eingeben!");
            return false;
        }
        return true;
    }
</script>

Answer 2

document.form 上不显示文本区域，您可以这样访问它：-

document.guest.elements["message"].value

Answer 3

你应该写：

document.forms.guest

而不是：

document.guest

你也应该看看这个answer。

编辑：事实上，您的 textarea 的长度为 "1" ！请参阅此edited fiddle。这是由于空格字符。删除它，它就会工作。