Question

     <form onsubmit="chkform()">
        <table>
        <tr><td>name</td><td><input type="text" id="uname"/></td></tr>
        <tr><td></td><td><div id="er1"></div></td></tr>
        <tr><td>address</td><td><input type="text" id="add"/></td></tr>
        <tr><td></td><td><div id="er2"></div></td></tr>
        </table>
        </form>
     <script>   
            function chkform()
            {


              if (document.getElementById("uname").value === "" ) 
              {

               document.getElementById("er1").innerHTML = "name cant be left blank"; 
               document.getElementById("er1").style.color = "red"; 
               document.getElementById("er1").style.display = "block"; 
              }
        }
</script>

我想在div中显示错误消息，如果任何字段留空，则在单击文本框时此消息应消失。

Answer 1

使用以下内容将始终允许您添加input而无需重写验证功能：

function chkform()
{
    var form = document.getElementsByTagName('form')[0];
    var inputs = form.getElementsByTagName('input');

    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].value === '')
            // do your error
    }
}

的 Working fiddle

Answer 2

我猜你需要return到

<form onsubmit="return chkform()">

和

红色警报消息块中的

return false

有效。

即

<form onsubmit="return chkform()">

function chkform() {
  if (document.getElementById("uname").value === "") {
    . . .
    return false;
  }

  if (document.getElementById("car").value == "truck") {
    . . .
    return false;
  }
  . . .
}

Answer 3

尝试将两个输入框添加到数组中，然后循环遍历它们以测试它们是否输入了值。

我已经编辑了你的代码。

function chkform()
                {

    var inputs = [];
    inputs[0] = document.getElementById("uname");
    inputs[1] = document.getElementById("add");

    for( i =0; i < inputs.length; i++) {

                  if (inputs[i].value === "" ) 
                  {

                   document.getElementById("er1").innerHTML = "Please fill out all form inputs!"; 
                   document.getElementById("er1").style.color = "red"; 
                   document.getElementById("er1").style.display = "block"; 
                  }
            }
    }

Answer 4

您应该在if条件中添加else部分，这样可以在填充thge字段时删除错误消息。

else {
              document.getElementById("er1").innerHTML = ""; 
              document.getElementById("er1").style.display = "none";
              }

<强> http://codepen.io/anon/pen/gxJid

Answer 5

 <form onsubmit="return false">
        <table>
        <tr><td>name</td><td><input type="text" id="uname"/></td></tr>
        <tr><td></td><td><div id="er1"></div></td></tr>
        <tr><td>address</td><td><input type="text" id="add"/></td></tr>
        <tr><td></td><td><div id="er2"></div></td></tr>
        </table>
        <input type="submit" onclick="chkform()"/>
        </form>
     <script>   
            function chkform()
            {


              if (document.getElementById("uname").value === "" ) 
              {

               document.getElementById("er1").innerHTML = "name cant be left blank"; 
               document.getElementById("er1").style.color = "red"; 
               document.getElementById("er1").style.display = "block"; 
              }
        }
</script>

如果任何字段留空，如何在表单中生成错误消息

5 个答案: