警告彈出消息未顯示在注冊中
[英]Warning pop-up message not showing up in sign-up
問題描述
我正在編寫一個模擬“注冊”體驗的代碼。 需要在那里放置相同的信息（姓名、姓氏、性別等......）。 但是，問題在於，當文本字段沒有輸入時，程序似乎沒有釋放警告彈出消息。 程序中是否缺少部分？
function myFunction1() { var x = document.getElementById("firstName").value; if (x == "") { alert("Please fill out this field"); } else { alert("Value accepted."); } } function myFunction2() { document.getElementById("firstName").style.width = "100px"; } function myFunction3() { var x = document.getElementById("lastName").value; if (x == "") { alert("Please fill out this field"); } else { alert("Value accepted."); } } function myFunction4() { document.getElementById("lastName").style.width = "100px"; } function myFunction5() { var x = document.getElementById("male").value; if (x == "") { alert("Please fill out this field"); } else { alert("Value accepted."); } } function myFunction6() { document.getElementById("male").style.width = "100px"; } function myFunction7() { var x = document.getElementById("female").value; if (x == "") { alert("Please fill out this field"); } else { alert("Value accepted."); } } function myFunction8() { document.getElementById("female").style.width = "100px"; } function myFunction9() { var x = document.getElementById("prefernotsay").value; if (x == "") { alert("Please fill out this field"); } else { alert("Value accepted."); } } function myFunction10() { document.getElementById("prefernotsay").style.width = "100px"; } function myFunction11() { var x = document.getElementById("email").value; if (x == "") { alert("Please fill out this field"); } else { alert("Value accepted."); } } function myFunction12() { document.getElementById("email").style.width = "100px"; } function myFunction13() { var x = document.getElementById("contactNumber").value; if (x == "") { alert("Please fill out this field"); } else { alert("Value accepted."); } } function myFunction14() { document.getElementById("contactNumber").style.width = "100px"; }
<nav> <form id="signup"> <fieldset form="signup"> <legend>Sign up: </legend> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName" onblur="myFunction1()" onfocus="myFunction2()"><br><br> <label for="lastName">Last Name:</label> <input type="text" id="lastName" name="lastName" onblur="myFunction3()" onfocus="myFunction4()"><br><br> <p>Gender:</p> <input type="radio" id="male" name="gender" value="Male" onblur="myFunction5()" onfocus="myFunction6()"> <label for="male">Male</label></br> <input type="radio" id="female" name="gender" value="Female" onblur="myFunction7()" onfocus="myFunction8()"> <label for="female">Female</label></br> <input type="radio" id="prefernotsay" name="gender" value="Prefer not say" onblur="myFunction9()" onfocus="myFunction10()"> <label for="prefernotsay">Prefer Not Say</label> <br> <br> <label for="email">Email:</label> <input type="text" id="email" name="email" onblur="myFunction11()" onfocus="myFunction12()"><br><br> <label for="contactNumber">Contact Number:</label> <input type="text" id="contactNumber" name="contactNumber" onblur="myFunction13()" onfocus="myFunction14()"><br><br> <input type="submit" value="Submit"> <input type="reset" value="Clear"> </fieldset> </form> </nav>
1 個解決方案
解決方案1
1 已采納 2022-05-24 12:18:36
您的代碼實際上足夠接近。 代碼中缺少一件事。
我希望這是您正在尋找的代碼。
代碼：
<!DOCTYPE html>
<html>
<body>
<nav>
<form id = "signup">
<fieldset form="signup">
<legend>Sign up: </legend>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" onblur="myFunction1()" onfocus="myFunction2()" required/><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" onblur="myFunction3()" onfocus="myFunction4()" required/><br><br>
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="Male" onblur="myFunction5()" onfocus="myFunction6()" required/>
<label for="male">Male</label></br>
<input type="radio" id="female" name="gender" value="Female" onblur="myFunction7()" onfocus="myFunction8()" required/>
<label for="female">Female</label></br>
<input type="radio" id="prefernotsay" name="gender" value="Prefer not say" onblur="myFunction9()" onfocus="myFunction10()" required/>
<label for="prefernotsay">Prefer Not Say</label>
<br>
<br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" onblur="myFunction11()" onfocus="myFunction12()" required/><br><br>
<label for="contactNumber">Contact Number:</label>
<input type="text" id="contactNumber" name="contactNumber" onblur="myFunction13()" onfocus="myFunction14()" required/><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Clear">
</fieldset>
</form>
</nav>
<script>
function myFunction1() {
var x = document.getElementById("firstName").value;
if (x == ""){
alert("Please fill out this field");
}
else{
alert("Value accepted.");
}
}
function myFunction2() {
document.getElementById("firstName").style.width = "100px";
}
function myFunction3() {
var x = document.getElementById("lastName").value;
if (x == ""){
alert("Please fill out this field");
}
else{
alert("Value accepted.");
}
}
function myFunction4() {
document.getElementById("lastName").style.width = "100px";
}
function myFunction5() {
var x = document.getElementById("male").value;
if (x == ""){
alert("Please fill out this field");
}
else{
alert("Value accepted.");
}
}
function myFunction6() {
document.getElementById("male").style.width = "100px";
}
function myFunction7() {
var x = document.getElementById("female").value;
if (x == ""){
alert("Please fill out this field");
}
else{
alert("Value accepted.");
}
}
function myFunction8() {
document.getElementById("female").style.width = "100px";
}
function myFunction9() {
var x = document.getElementById("prefernotsay").value;
if (x == ""){
alert("Please fill out this field");
}
else{
alert("Value accepted.");
}
}
function myFunction10() {
document.getElementById("prefernotsay").style.width = "100px";
}
function myFunction11() {
var x = document.getElementById("email").value;
if (x == ""){
alert("Please fill out this field");
}
else{
alert("Value accepted.");
}
}
function myFunction12() {
document.getElementById("email").style.width = "100px";
}
function myFunction13() {
var x = document.getElementById("contactNumber").value;
if (x == ""){
alert("Please fill out this field");
}
else{
alert("Value accepted.");
}
}
function myFunction14() {
document.getElementById("contactNumber").style.width = "100px";
}
</script>
</body>
</html>
表單彈出消息
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.