Question

我需要通过打印输入框旁边的错误消息来验证javascript中的表单。当我这样做时，验证仅在屏幕上闪烁并保留在屏幕上。当我从javascript打印表时，我也遇到了同样的问题，它只在屏幕上闪烁而不会保持打开状态。我找不到任何语法错误，但我知道我错过了一些东西。先感谢您。阿维

<!DOCTYPE html>

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript">

        function validateForm() 
        {       
            var x = document.getElementById('fname').value;

            if(x === null || x === "")
            {
                document.getElementById('error1').innerHTML = "Invalid Entry";            
            }
            else
                tableCreate();
        }

        function tableCreate()
        {
            var N = document.getElementById('fname').value;
            var L = document.getElementById('lname').value;
            var D = document.getElementById('dob').value;

            var ar = [N, L, D];
            console.log(ar);
            document.write('<table>');
            document.write('<tr>');
            document.write('<th>First Name</th>');
            document.write('<th>Last Name</th>');
            document.write('<th>Date of Birth</th>');
            document.write('</tr>');                

            for(var i = 1; i < ar.length; i++)
            {
                document.write('<tr><td>' + ar[i] + '</td></tr>');
            }

            document.write('</table>');
        }            
    </script>
</head>
<body>

    <form name="theForm" action="FormAndTable.html" method="post">
        First Name: <input type="text" id="fname">
        <span style="color:red" id="error1"></span><br>
        Last Name: <input type="text" id="lname"><br>
        Date of Birth: <input type="text" id="dob"><br>
        <input type="submit" value="Save" onclick="validateForm()">
    </form>

</body>
</html>

Answer 1

使用type="button"，type="submit"将提交表单，然后重新加载页面。

试试这个：

＆＃13;

function validateForm() {
  var x = document.getElementById('fname').value;

  if (x === null || x === "") {
    document.getElementById('error1').innerHTML = "Invalid Entry";
  } else
    tableCreate();
}

function tableCreate() {
  var N = document.getElementById('fname').value;
  var L = document.getElementById('lname').value;
  var D = document.getElementById('dob').value;

  var ar = [N, L, D];
  console.log(ar);
  document.write('<table>');
  document.write('<tr>');
  document.write('<th>First Name</th>');
  document.write('<th>Last Name</th>');
  document.write('<th>Date of Birth</th>');
  document.write('</tr>');

  for (var i = 1; i < ar.length; i++) {
    document.write('<tr><td>' + ar[i] + '</td></tr>');
  }

  document.write('</table>');
}

＆＃13;

<form name="theForm" action="FormAndTable.html" method="post">
  First Name:
  <input type="text" id="fname">
  <span style="color:red" id="error1"></span>
  <br>Last Name:
  <input type="text" id="lname">
  <br>Date of Birth:
  <input type="text" id="dob">
  <br>
  <input type="button" value="Save" onclick="validateForm()">
</form>

＆＃13;

验证表格并打印到表格

1 个答案: