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

Question

我在 this fiddle 中有一个表单在提交时生成此错误消息："error" : "key missing: title." 我不明白这是什么意思。

在运行上，表单在输出窗格中正确显示。提交时，输出窗格变黑，并且该错误消息以黑底黑字显示。必须 select 才能阅读。

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 说所有代码（不仅仅是我在这里复制的代码）在语法上是正确的。

在下面的代码片段中，在提交时，控制台会闪烁一些消息大约十分之一秒然后消失。此错误消息留在结果窗格中："The custom error module does not recognize this error."

片段

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 对象，但是仍在提交表单。因为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 和 Console）。所以，它给你一个错误信息。

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

如果您想在在线 Javascript 编辑器上演示表单提交将提交正确的数据 而无需 实际提交表单，那么只需阻止表单提交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

$(document).ready(function() {
  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
}); // end doc.ready

function buildClasses(fd) {
  var timeslots = ['0830', '0900', '1030', '1245', '1415', '1545'];
  var classrooms = ['chapel', 'A', 'B', 'C', 'D', 'E', 'F', 'I'];
  var ts = '';
  var rm = '';
  var startIndex = 3;
  var classes = [];
  console.log('log classes post-def : ', classes);

  if (fd[startIndex].value == 'attend') {
    fd[startIndex].value = 'chapel';
  } else {
    fd[startIndex].value = 'unsure';
  }
  for (var i = startIndex; i < fd.length; i++) {
    if (!fd[i].value || fd[i].value == 'unsure') {} else {
      ts = timeslots[i - startIndex];
      rm = fd[i].value;

      console.log('i, fd[i].value : ', i, fd[i].value);
      console.log('classes pre-push', classes);

      classes.push({
        timeslot: ts,
        room: rm
      });

      console.log('classes post-push : ', classes);

    } //  end else/if
  } //  end for
  return classes;
} //  end def fn buildClassSelections

<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">
      <option value="" name="defaultOptionUnsure">unsure</option>
      <option value="attend" name="">attend</option>
      <option value="not attend">not attend</option>
    </select>
  </label>
    <label>09:00 Classes
    <select name="select">
      <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">
      <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>

PS: Is there a way to hide the snippet code so that it doesn't show in the question by default?

选中 "Hide snippet by default" 复选框，就像我对上面的代码片段所做的那样：

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

In jsfiddle, what does the runtime error message "error" : "key missing: title" mean?

javascript

jsfiddle