如何在提交表单之前要求所有输入字段？

Question

我是 JavaScript 的新人。

所以我想做的是使用纯 JavaScript 来检查表单输入字段的有效性。问题是，我正在使用 span 在输入的右侧创建“*Required”，但只有一个出现在姓氏中。

我想让两个字段在提交表单时为空的输入显示跨度“*Required”。此外，当只有一个为空时，仅将那个设为“*必需”。

感谢您给我的任何反馈和建议。

<!DOCTYPE html>
<html>

     
    <title></title>
    <head>
        
    </head>
    
    <body>
    <form id = fourm>
    <label>First Name:</label><br>
        <input id="id1" type="text" name="firstname"><span id="demo" style="color:red"></span><br>
    <label>Last Name:</label><br>
        <input id="id2" type="text"  name ="lastname"><span id="dema" style="color:red"></span><br>
    <br><button onclick="myFunction()">Submit</button>
    </form>

    </body>

</html> 



<script>
function myFunction() {
    if (!document.getElementById("id1").value) {
        document.getElementById("demo").innerHTML = "*Required";
        document.getElementById("fourm").addEventListener("click", function(event){
    event.preventDefault() });

    } else if (document.getElementById("id1").value){
    document.getElementById("demo").innerHTML = "";
    return fourm;
    } 
} 

function myFunction() {
    if (!document.getElementById("id2").value) {
        document.getElementById("dema").innerHTML = "*Required";
        document.getElementById("fourm").addEventListener("click", function(event){
    event.preventDefault() });

    } else if (document.getElementById("id2").value){
    document.getElementById("dema").innerHTML = "";
    return fourm;
    } 
} 

</script>

Answer 1

您有重复的函数定义！

函数声明在语义上等同于下面的函数表达式。

var myFunction = function() {}

如果您的编码如下

myFunction = 1;
var myFunction = function() {/*1*/};
var myFunction = function() {/*2*/};

由于变量提升，它会被 JS 引擎转换为如下等价物

var myFunction;

myFunction = 1;
myFunction = function() {/*1*/};
myFunction = function() {/*2*/};

虽然函数声明在 javascript 中被提升到顶部，因此允许您在声明它们之前调用它们。
当你有重复的函数声明时，就像你的情况一样，第一个声明由于提升而被第二个函数声明替换，你失去了第一个中的逻辑。
对于以下代码

myFunction =1;
function myFunction() {/*1*/}; 
function myFunction() {/*2*/};

你可以这样想。

var myFunction;                //Hoist the variable to top   
myFunction = function() {/*1*/};//Hoist the first function to top and assign
myFunction = function() {/*2*/};//Hoist the second function to top and assign
myFunction = 1;                //Assignment order changes

对于函数声明，函数完全提升到顶部，而不考虑它在词法定义的位置。对于函数表达式，只有函数变量被提升，函数赋值保留在词法位置。

function myFunction() {

  //Reset error messages
  document.getElementById("demo").innerHTML = "";
  document.getElementById("dema").innerHTML = "";


  if (!document.getElementById("id1").value) {
    document.getElementById("demo").innerHTML = "*Required";
    document.getElementById("fourm").addEventListener("click", function(event) {
      event.preventDefault()
    });

  } else if (document.getElementById("id1").value) {
    document.getElementById("demo").innerHTML = "";
    
  }

  if (!document.getElementById("id2").value) {
    document.getElementById("dema").innerHTML = "*Required";
    document.getElementById("fourm").addEventListener("click", function(event) {
      event.preventDefault()
    });

  } else if (document.getElementById("id2").value) {
    document.getElementById("dema").innerHTML = "";
   
  }
  return false;
}

<!DOCTYPE html>
<html>


<title></title>

<head>

</head>

<body>
  <form id="fourm">
    <label>First Name:</label>
    <br>
    <input id="id1" type="text" name="firstname"><span id="demo" style="color:red"></span>
    <br>
    <label>Last Name:</label>
    <br>
    <input id="id2" type="text" name="lastname"><span id="dema" style="color:red"></span>
    <br>
    <br>
    <button onclick="myFunction()">Submit</button>
  </form>

</body>

</html>

如何在提交表单之前要求所有输入字段？

How to make all input fields be required before submitting a form?

html

javascript

forms

dom-events