Question

我有一个学校作业，他们要求我用HTML和Javascript创建一个比萨饼表单。他们要求输入三个字段-大小，名称和地址。

如果其中一个字段为空，则弹出警告消息，提示缺什么。
如果该表格有效且完整，则将弹出一条警告消息，提示全名，地址和大小。

我的问题是我不明白如何检查表格是否完整。

这是我到目前为止编写的代码：

    function validateForm() {
        var errormessage = "";
        if (document.getElementById('name').value == "") {
        alert (errormessage += 'Please enter your name')
        return false;
        }
        if (document.getElementById('address').value == "") {
            alert (errormessage += 'Please enter your address')
            return false;
        }
    }
    alert("validations passed");
    return true;
}

<!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <script src = "script2.js"> </script>
        <body>
            <h3> Pizza Order </h3>
            <form id="pizza-form" onsubmit="return fullForm()" method="post">
                Full name: <br>
                <input type="text" id="name">
                <br>
                Address: <br>
                <input type="text" id="address">
                <br>
                Size: <br>
                <select name="Size">
                <option value="Large">Large</option>
                <option value="Medium">Medium</option>
                <option value="Small">Small</option>
                </select> <br><br>  
                <input type="submit" value="Order Pizza">
            </form>
           
        </body>
    </html>

非常感谢您。

Answer 1

您已接近解决方案。在HTML代码中，更正onsubmit函数的名称，并在javascript函数中一起检查所有值：

function validateForm()
{
  var errorMessage = '';
  var nameValue    = document.getElementById('name').value;
  var addressValue = document.getElementById('address').value;

  if (!nameValue)
    errorMessage += 'Please enter your name \n';
  if (!addressValue)
    errorMessage += 'Please enter your address ';

  if(errorMessage)
  {
    alert(errorMessage);
    return false;
  }
  else
  {
    alert('Name : ' + nameValue + '\n' + 'Address : ' + addressValue);
    return true;
  }
}

<h3> Pizza Order </h3>
<form id="pizza-form" onsubmit="return validateForm()">
  Full name: <br>
  <input type="text" id="name">
  <br>
  Address: <br>
  <input type="text" id="address">
  <br>
  Size: <br>
  <select name="Size">
  <option value="Large">Large</option>
  <option value="Medium">Medium</option>
  <option value="Small">Small</option>
  </select> <br><br>  
  <input type="submit" value="Order Pizza">
</form>

Answer 2

优化的解决方案如下所示：

function validateForm() {
    const errorTable = ['name', 'address']

    const errorMessage = errorTable.map(elem => !!document.getElementById(elem).value ? '' : 'Please enter your ' + elem)

    console.log(errorMessage.join('\n'))
    return errorMessage.every(elem => elem === '')
}

<!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <body>
            <h3> Pizza Order </h3>
            <form id="pizza-form" onsubmit="return validateForm()">
                Full name: <br>
                <input type="text" id="name">
                <br>
                Address: <br>
                <input type="text" id="address">
                <br>
                Size: <br>
                <select name="size" id="size">
                  <option value="Large">Large</option>
                  <option value="Medium">Medium</option>
                  <option value="Small">Small</option>
                </select> <br><br>  
                <input type="submit" value="Order Pizza">
            </form>
        </body>
    </html>

您只需要在HTML元素的onsubmit属性中键入要用于验证的函数的名称。

您的表单标签现在看起来像这样：

<form id="pizza-form" onsubmit="return validateForm()">

Answer 3

按照您尝试执行此操作的方式，您的表单提交正在调用fullForm()

因此，将您的JavaScript更改为：

    function fullForm() {
        var errormessage = "";

        if (document.getElementById('name').value == "") {
        alert (errormessage += 'Please enter your name')
        return false;
        }

        if (document.getElementById('address').value == "") {
            alert (errormessage += 'Please enter your address')
            return false;
        }

    alert("validations passed");



    return true;
}

Answer 4

添加 else if 条件和 else 条件以提交有效表格

更新代码：

<form id="pizza-form" onsubmit="return validateForm()" method="post">

您的validateForm()函数：

function validateForm() {
 var errormessage = "";
 if (document.getElementById('name').value == "") {
  alert(errormessage += 'Please enter your name');
  return false;
 } else if (document.getElementById('address').value == "") {
  alert(errormessage += 'Please enter your address')
  return false;
 } else {
  return true;
 }
}

function validateForm() {
 var errormessage = "";
 if (document.getElementById('name').value == "") {
  alert(errormessage += 'Please enter your name');
  return false;
 } else if (document.getElementById('address').value == "") {
  alert(errormessage += 'Please enter your address')
  return false;
 } else {
  return true;
 }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title
    </title>
  </head>
  <script src = "script2.js"> </script>
  <body>
    <h3> Pizza Order 
    </h3>
    <form id="pizza-form" onsubmit="return validateForm()" method="post">
      Full name: 
      <br>
      <input type="text" id="name">
      <br>
      Address: 
      <br>
      <input type="text" id="address">
      <br>
      Size: 
      <br>
      <select name="Size">
        <option value="Large">Large
        </option>
        <option value="Medium">Medium
        </option>
        <option value="Small">Small
        </option>
      </select> 
      <br>
      <br>  
      <input type="submit" value="Order Pizza">
    </form>
  </body>
</html>

验证表单是否完整提交

4 个答案: