Question

我正在尝试检查字段是否为空，但它总是抛出此错误：

TypeError: document.getElementById(...) is null

以下是代码：http://pastebin.com/v8mDwG2i

我正在使用jQuery UI和jQuery。我的问题是它总是抛出空并在该行上中断。

Answer 1

您收到该错误，因为在JS中您检查了ID，但在HTML中您没有提供id标记，只有name标记。

我将每个输入元素的name="..."更改为id="..."。

但您的代码中也存在其他一些错误。下面是一个工作代码片段，其中修复了所有这些错误，并解释了我已更改的内容：

JS，CSS，HTML：

＆＃13;

$(window).on('load',function(){
  $("#submitBtn").hide();
  $("#logStat").hide();

  $('#preCheckBtn').click(function(){
    $("#logStat").fadeIn(200);
    $("#progBar").progressbar();

    $("#progBar").progressbar("value", 0);
    $("#writeThis").html("Verifying name...");
    if ($("#nameIn").val() == (null||"")) {
      $("#writeThis").html("ERROR: Name is empty.");
      setTimeout(function(){$("#logStat").fadeOut(200);},2000);
      return;
    }

    $("#progBar").progressbar("value", 25);
    $("#writeThis").html("Verifying ID...");
    if ($("#idIn").val()==(null||"") || isNaN($("#idIn").val())) {
      $("#writeThis").html("ERROR: ID is empty or has wrong format.");
      setTimeout(function(){$("#logStat").fadeOut(200);},2000);
      return;
    }

    $("#progBar").progressbar("value", 50);
    $("#writeThis").html("Verifying phone number...");
    if ($("#phoneIn").val()==(null||"") || isNaN($("#phoneIn").val())) {
      $("#writeThis").html("ERROR: Phone Number is empty or has wrong format.");
      setTimeout(function(){$("#logStat").fadeOut(200);},2000);
      return;
    }

    $("#progBar").progressbar("value", 75);
    $("#writeThis").html("Locking data...");
    $("#nameIn").attr("disabled", true);
    $("#idIn").attr("disabled", true);
    $("#phoneIn").attr("disabled", true);

    $("#submitBtn").show();
    $("#progBar").progressbar("value", 100);
    $("#writeThis").html("Done!");
    setTimeout(function(){$("#logStat").fadeOut(200);},1000);
  });
});

＆＃13;

body{
  font-family: sans-serif;
  width: 1020px;
  margin: 25px auto;
}
#logStat{
  margin: auto;
  text-align: center;
  padding: 10px;
  width: 60%;
  border-radius: 5px;
  background-color: #B3B3B3;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

<body>
  <form action="data/scripts/submit_form.php" method="post">
    <input type="text" placeholder="Name" id="nameIn" required /><br />
    <input type="text" placeholder="ID" id="idIn" required /><br />
    <input type="text" placeholder="Phone number" id="phoneIn" maxlength="10" required /><br />
    <input type="submit" value="Run PHP" id="submitBtn" />
  </form>
  <button id="preCheckBtn">Pre-check data</button>
  <div id="logStat">
    <div id="progBar"></div>
    <p id="writeThis"></p>
  </div>
</body>

＆＃13;

＆＃13; （小提琴：http://jsfiddle.net/sdbhu7yL/8/ ）

在第二个和第三个if子句中，您只检查输入元素本身，而不是它的值。我想你可能只是忘了.value，所以我改了它来检查价值。
在那些相同的if子句中，isNaN(checkData)给出错误，因为checkData从未声明，它是未定义的。我将其更改为isNaN($("#someID").val())以直接检查值。
在所有if-clauses中，我将==null更改为==(null||"")。否则，如果您在一个或多个输入字段仍为空时单击预检查按钮，则无论如何它们都会被禁用，您无法再填写空字段。（我不确定如果首先禁用它们是一个好主意，因为用户可能会误填它们，然后他/她就不能再纠正它了。）
我把CSS和JS放在不同的文件中。这是一种很好的做法：将不同类型的代码分开。（在代码片段和jsfiddle中它们只是在单独的子窗口中，但在您的实际站点上，您需要链接到CSS和JS文件 - 就像您链接到jQuery＆＃39; .js＆＃39;和＆＃39; .css＆＃39;文件。）
我删除了loaded()功能。 jQuery document.ready和window.load的整个想法是取代普通的JavaScript window.onload。你正在做的是：在页面加载时你调用一个函数loaded()（来自你的HTML体内），并在该函数内检查document.ready。这是非常多余的另外，在document.ready之前调用window.load，因此将document.ready放在加载时调用的函数中，没有任何用处。实际上，前两条.hide()行甚至没有被执行; submitBtn和logStat仍然可见，因为您在document.ready之后检查了window.load，但document.ready因为已经发生了<{1}}而无法解雇>之前 window.load （我建议始终使用window.load btw，除非特别需要document.ready。）
我将window.load放在整个代码周围，而不仅仅是前两个.hide()行。这是window.load应该最好使用的方式。
我从HTML中的预检查按钮中删除了type="button"。 type="button"仅用于输入元素以将其分类为按钮（因为有更多输入类型）。如果您已使用专用的<button>元素，则不再需要type="button"。
我给了预检查按钮一个ID，并将onclick - 绑定到jQuery：$('#preCheckBtn').click(function(){ ...});。将所有JS相关代码放在JS文件中更清晰。 Read about it here。
我将所有常规JavaScript翻译为jQuery（例如document.getElementById("someID").innerHTML = ...;到$('#someID').html(...);。
我最后添加了$("#submitBtn").show();，我想您可能只是忘了添加它（我假设您希望该按钮显示所有if子句的传递时间。）
我将您的"ERROR: ID is NULL."消息更改为更加用户友好的文本，因为当您键入文本（而不是数字）时也会显示NULL错误消息，这会使消息不正确。（当然，这更像是一个设计问题，请随意讨厌它。）

检查null是否为JS typeerror

1 个答案: