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

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>

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

問題描述

1 個解決方案

解決方案1
1 已采納 2016-03-24 00:52:18

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

問題描述

1 個解決方案

解決方案1 1 已采納 2016-03-24 00:52:18

解決方案1
1 已采納 2016-03-24 00:52:18