警告弹出消息未显示在注册中
[英]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.