Question

我在这里有一个表单，当我单击“提交”但三个框都为空时，我试图获取一条错误消息，但它不起作用，我在做什么错？我在表单中加入了onsubmit，但仍然无法正常工作

HTML：

var message = document.getElementById("ErrorMessage");
    
function clearMyField(el) {
  if(el.placeholder !='') {
    el.placeholder = '';
  }
}
    

function checkforblank() {
  var allInputs = document.querySelectorAll('input[type=text]');
  for(let i = 0; i<allInputs.length; i++){
    let v = allInputs[i].value.trim();
    let n = allInputs[i].name;
    if(v == ""){
      message.textContent = n + " is empty";
      return false;
    }
  }
}

<!doctype html>
<html lang="en">
<head>
  <title> Lab 6 - Task 2 </title>
  <style>
  span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
  </style>
  <meta charset="utf-8">
  <script src="prototype.js"></script>
  <script src="task2.js"></script>
</head>
<body>
  <form id="myForm" method="get" onsubmit="return checkforblank()">
    <h1> Form Submit </h1>
    <p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
    <p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
    <p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
    <p>
    <button id="submitButton" type="submit"> Submit </button>
    <input type="reset" value="Reset">
    </p>
    <p style="color:red" id="ErrorMessage"> &nbsp;</p>
  </form>

</body>
</html>

Answer 1

解决此问题：

<form id="myForm" method="get" onsubmit="checkforblank()">
</form>

See here

无需返回语句

Answer 2

按钮的类型应为submit，而不是button。由于要在函数内部比较 value ，因此必须设置输入的 placeholder 属性而不是 value

<button id="submitButton" type="submit"> Submit </button>

var message = document.getElementById("ErrorMessage");

function clearMyField(el) {
  if(el.placeholder !='') {
    el.placeholder = '';
  }
}


function checkforblank() {
  var allInputs = document.querySelectorAll('input[type=text]');
  for(let i = 0; i<allInputs.length; i++){
    let v = allInputs[i].value.trim();
    let n = allInputs[i].name;
    if(v == ""){
      message.textContent = n + " is empty";
      return false;
    }
  }
}

span {
  padding-left: 10px;
  display: block;
  float: left;
  width: 20%;
}
button { margin-left: 10px; }
body {
  width: 80%; margin: auto; font-family: sans-serif;
  border: 1px solid black;
}

<form id="myForm" method="get" onsubmit="return checkforblank()">
  <h1> Form Submit </h1>
  <p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
  <p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
  <p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
  <p>
  <button id="submitButton" type="submit"> Submit </button>
  <input type="reset" value="Reset">
  </p>
  <p style="color:red" id="ErrorMessage"> &nbsp;</p>
</form>

尽管我更喜欢以下内容：

var message = document.getElementById("ErrorMessage");

function clearMyField(el) {
  if(el.placeholder !='') {
    el.placeholder = '';
  }
}


function checkforblank() {
  var allInputs = document.querySelectorAll('input[type=text]');
  for(let i = 0; i<allInputs.length; i++){
    let v = allInputs[i].value.trim();
    let n = allInputs[i].name;
    if(v == ""){
      return false;
    }
  }
}

span {
  padding-left: 10px;
  display: block;
  float: left;
  width: 20%;
}
button { margin-left: 10px; }
body {
  width: 80%; margin: auto; font-family: sans-serif;
  border: 1px solid black;
}

<form id="myForm" method="get" onsubmit="return checkforblank()">
  <h1> Form Submit </h1>
  <p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);" required></p>
  <p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);" required></p>
  <p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);" required></p>
  <p>
  <button id="submitButton" type="submit"> Submit </button>
  <input type="reset" value="Reset">
  </p>
</form>

Answer 3

您可以使用html5属性轻松完成此操作。（必需的占位符属性）

尝试下面的代码。

 <!doctype html>
    <html lang="en">
    <head>
      <title> Lab 6 - Task 2 </title>
      <style>
        span {
          padding-left: 10px;
          display: block;
          float: left;
          width: 20%;
        }
        button { margin-left: 10px; }
        body {
          width: 80%; margin: auto; font-family: sans-serif;
          border: 1px solid black;
        }
      </style>
      <meta charset="utf-8">
    </head>
    <body>
        <form id="myForm" method="get">
          <h1> Form Submit </h1>
          <p><span>Name:</span> <input id="input1" placeholder="Enter Name" name="Name" required></p>
          <p><span>Student Id:</span> <input id="input2" placeholder="Enter Student ID" name="StudentID" required></p>
          <p><span>Email:</span> <input id="input3" placeholder="Enter Email" name="Email" required></p>
          <p>
            <button id="submitButton" type="submit">Submit </button>
            <input type="reset" value="Reset"/>
          </p>
          <p style="color:red" id="ErrorMessage"> &nbsp; </p>
        </form>
    </body>
    </html>

Answer 4

您看不到错误消息，因为表单提交刷新了页面。要查看错误，请使用 event.preventDefault 来获取错误。尝试下面的代码。

'((1 2 3))

表格提交为空

4 个答案: