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

how to generate error message in form if any of the fields left blank

本文关键字：表单 消息 错误 字段 任何 如果      更新时间：2023-09-26
     <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 中显示错误消息，如果任何字段留空，并且单击文本框时此消息应该消失。

尝试将两个输入框添加到数组中，并循环访问它们以测试它们是否输入了值。

我已经编辑了你的代码。 

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"; 
                  }
            }
    }

使用以下方法将始终允许您添加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
    }
}

工作小提琴

您应该将 else 部分添加到 if 条件中，这将负责在填写字段时删除错误消息。

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

http://codepen.io/anon/pen/gxJid

我想你需要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;
  }
  . . .
}

 <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>
相关文章：