上提出改變的可視性 - 只閃爍可見

Question

我想只是爲了讓span標籤出現時，按下按鈕使用下面的代碼提交：

<form onsubmit="checkName(this);"> 
    <ul> 
     <li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li> 
     ... 
     <li><input type="submit"></li> 
    </ul> 
</form> 

我Javasrcipt：

function checkName(form){ 
    if (form.username.value == "") { 
     document.getElementById("surnameMissing").style.visibility = "visible";   
    } 
    return false; 
} 

的span最初設置爲隱藏並在提交後進行更改，但該標籤僅出現一瞬間，然後回到隱藏狀態。有什麼建議，爲什麼這是？

Answer 1

提交這form這就是爲什麼你只看到它的第二。

如果表單無效，您需要阻止提交 - 在屬性onsubmit中添加return。

像這樣：

function checkName(form) { 
 
    if (form.username.value == "") { 
 
    document.getElementById("surnameMissing").style.visibility = "visible";   
 
    } 
 
    return false; 
 
}

#surnameMissing { 
 
    visibility:hidden; 
 
}

<form onsubmit="return checkName(this);"> 
 
    <ul> 
 
     <li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li> 
 
     ... 
 
     <li><input type="submit"></li> 
 
    </ul> 
 
</form>

另一種選擇是將事件傳遞給函數，然後使用.preventDefault()這樣的：

function checkName(form, event) { 
 
    event.preventDefault(); 
 
    if (form.username.value == "") { 
 
    document.getElementById("surnameMissing").style.visibility = "visible";   
 
    } 
 
    return false; 
 
}

#surnameMissing { 
 
    visibility:hidden; 
 
}

<form onsubmit="checkName(this, event);"> 
 
    <ul> 
 
     <li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li> 
 
     ... 
 
     <li><input type="submit"></li> 
 
    </ul> 
 
</form>

Answer 2

這是因爲表單一旦提交，就會被提交。要阻止它提交，請使用此代碼。

<script> 
    function checkName(form){ 
    if(form.username.value == ""){ 
     document.getElementById("surnameMissing").style.visibility = "visible";   
     return false; 
    } 
    return true; 
    } 
</script> 
<form onsubmit="return checkName(this);"> 
<ul> 
    <li>Surname<br><input type="text" name="username"><span style="visibility:hidden;" id="surnameMissing">Surname is a required field</span></li> 
    ... 
    <li><input type="submit"></li> 
</ul> 
</form> 

Answer 3

防止通過在函數名稱下面添加event.preventDefault();來提交表單。然後確保您在username.value == ""返回錯誤時提交表單。

function checkName (form) { 
    // prevent from submission 
    event.preventDefault(); 

    if(form.username.value == "") { 
     document.getElementById("surnameMissing").style.visibility = 'visible'; 
    } else { 
     // Submit on successful validation 
     form.submit(); 
    } 
} 

您還可以添加event.preventDefault()你打電話的功能在窗體的onsubmit屬性之前。

<form onsubmit="event.preventDefault(); checkName(this);"> ... </form> 

就我個人而言，我還想在輸入過程中捕獲事件。不只是在提交過程中。

<form id="myForm"> 
    <ul> 
     <li>Surname: <br><input type="text" name="username" id="username"> 
     <span id="surnameMissing">Surname is a required field</span></li> 
     <li><input type="submit"></li> 
    </ul> 
</form> 

和JavaScript

var form = document.getElementById("myForm"); 
form.addEventListener('submit', function(e) { 
    e.preventDefault(); 

    if(this.username.value == "") { 
     document.getElementById("surnameMissing").style.visibility = 'visible'; 
    } else { 
     this.submit(); 
    } 
}); 

var inputUsername = document.getElementById("username"); 
inputUsername.addEventListener('keyup', function(e) { 
    if(this.value == "") { 
     document.getElementById("surnameMissing").style.visibility = 'visible'; 
    } else { 
     document.getElementById("surnameMissing").style.visibility = 'hidden'; 
    } 
});