Question

我在this fiddle中有一个表单，在提交时会生成此错误消息：“错误”：“键缺失：标题”。我不知道这是什么意思。

运行时，该窗体将正确显示在输出窗格中。提交后，输出窗格将变黑，并且该错误消息将以黑底黑字显示。必须选择它才能阅读。

JavaScript（相关部分）：

$(document).ready( function() {
  document.addEventListener("submit", (e) => {
  var formData = $( 'form' ).serializeArray();
  var classes =  buildClasses(formData);
  });  //  end arrow fn callback on event listener
});  // end doc.ready

function buildClasses(fd) {
  ...
}  // end def fn buildClasses

我的JavaScript syntax checker说 all 所有代码（不仅是我在此处复制的代码）在语法上都是正确的。

在下面的代码段中，提交后，控制台会闪烁一些消息约十分之一秒，然后消失。该错误消息将留在结果窗格中：“自定义错误模块无法识别此错误。”

代码段

PS：有没有办法隐藏摘要代码，以使其默认情况下不显示在问题中？

$(document).ready(function() {
  document.addEventListener("submit", (e) => {
    e.preventDefault;
    var formData = $('form').serializeArray();
    console.log('log formData : ', formData);
    var classes = buildClasses(formData);
    // updateTable(classes);
    console.log('log classes after build : ', classes);
  }); //  end arrow fn callback on event listener
}); // end doc.ready

function buildClasses(fd) {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <title>jdfidde for buildClasses</title>
</head>
<form action="" method="post">
  <div>
    <label>First Name
    <input type="text" name="fname" size="25">
  </label>
  </div>
  <div>
    <label>Last Name
    <input type="text" name="lname" size="25">
  </label>
  </div>
  <div>
    <label>email address
    <input type="email" name="email" size="25">
  </label>
  </div>
  <div>
    <label>08:30 Keynote Speaker
    <select name="select 0830">
      <option value="unsure" >unsure</option>
      <option value="attend" >attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select name="select 0900">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
    </label>
    <label>10:30 Classes
    <select name="select 1030">
      <option value="unsure">unsure</option>
      <option value="A">room A</option>
      <option value="B">room B</option>
    </select>
  </label>
  </div>
  <div>
    <input type="submit" value="submit form">
  </div>
</form>

Answer 1

在JSFiddle上，您有一个submit事件侦听器，该事件侦听器可以运行，但不会阻止表单提交。因此，在buildClasses运行之后，您已经创建了一个classes对象，但是 still 表单正在提交中。因为iframe的src是

https://fiddle.jshell.net/_display/

表单提交将表单数据发送到该地址（例如，

fname: 
lname: 
email: 
select: 
select: unsure
select: unsure

）

但是，当然，JSFiddle不知道这意味着什么。大概是，fiddle.jshell.net使用表单提交给它做其他事情（它可能期望可以用来创建响应iframe文档的数据），并且期望应该具有的表单提交title键。

类似地，在Stack Overflow的代码段编辑器中，您正在将该数据提交到https://stacksnippets.net/js，但是stacksnippets并不希望使用此类表单数据-它只希望可用于创建代码段的数据（具体来说，是：HTML，CSS，JS，Babel和控制台）。因此，它会给您一条错误消息。

这仅仅是在在线Javascript编辑器中提交表单的结果，该编辑器不希望提交此类表单。在您的实际网站上，没关系，只要您的网站设置为正确处理表单提交即可。

如果您想在在线Javascript编辑器上演示表单提交将提交正确的数据而没有实际提交表单的，则只需在{{ {1}}处理程序，例如

preventDefault

submit

document.addEventListener("submit", (e) => {
  var formData = $('form').serializeArray();
  console.log('log formData : ', formData);
  var classes = buildClasses(formData);
  // updageTable(classes);
  console.log('log classes after build : ', classes);
  e.preventDefault();
  // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}); //  end arrow fn callback on event listener

PS：有没有办法隐藏摘要代码，以使其默认情况下不显示在问题中？

选中“默认情况下隐藏代码段”复选框，就像我对上述代码段所做的操作一样：

在jsfiddle中，运行时错误消息“ error”：“ key missing：title”是什么意思？

1 个答案: