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

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

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

我已经编辑了你的代码。

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