我正在为我的 JavaScript/Jquery 类(class)做作业。我有一份电子邮件报名表。我需要向“清除条目”按钮添加一个事件处理程序，并将星号添加回表单字段末尾的范围。
这是我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="email_list.css">
<script src="jquery.js"></script>
<script src="email_list.js"></script>
</head>
<body>
<section>
<h1>Please join our email list</h1>
<form id="email_form" name="email_form" action="join.html" method="get">
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1">
<span id="email_address1_error">*</span><br>
<label for="email_address2">Re-enter Email Address:</label>
<input type="text" id="email_address2">
<span id="email_address2_error">*</span><br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name">
<span id="first_name_error">*</span><br>
<label> </label>
<input type="button" id="join_list" value="Join our List"><br>
<label> </label>
<input type="button" id="clear_entries" value="Clear Entries">
</form>
</section>
</body>
</html>
这是 Jquery:
$(document).ready(function() {
$("#join_list").click(
function() {
var emailAddress1 = $("#email_address1").val();
var emailAddress2 = $("#email_address2").val();
var isValid = true;
// validate the first email address
if (emailAddress1 == "") {
$("#email_address1").next().text("This field is required.");
isValid = false;
} else {
$("#email_address1").next().text("");
}
// validate the second email address
if (emailAddress2 == "") {
$("#email_address2_error").text("This field is required.");
isValid = false;
} else if (emailAddress1 !== emailAddress2) {
$("#email_address2").next().text("This entry must equal first entry.");
isValid = false;
} else {
$("#email_address2").next().text("");
}
// validate the first name entry
if ($("#first_name").val() == "") {
$("#first_name").next().text("This field is required.");
isValid = false;
}
else {
$("#first_name").next().text("");
}
// submit the form if all entries are valid
if (isValid) {
$("#email_form").submit();
}
} // end function
); // end click
//on-click event to clear out all text boxes
$("#clear_entries").click (
function () {
$("input[type=text]").each(function () {
$(this).val(" ");
});
$("#email_address1_error").next().text("*"); $("#email_address2_error").next().text("*");$("#first_name_error").next().text("*");
});
//
$("#email_address1").focus();
}); // end ready
说明说可以在一条语句中添加星号。 这就是我使用的 "$("#email_address1_error").next().text(""); $("#email_address2_error").next().text("");$ ("#first_name_error").next().text("*");"。 没有错误消息告诉我出了什么问题，但是星号没有显示，所以我编写该语句的方式是错误的。应该怎么做？
最佳答案
您使用错误跨度 ID 作为选择器，然后调用 next()。只需删除 .next() 即可。
即。改变
$("#email_address1_error").next().text("*"); $("#email_address2_error").next().text("*");$("#first_name_error").next().text("*");
至
$("#email_address1_error").text("*"); $("#email_address2_error").text("*");$("#first_name_error").text("*");
瞧!
关于javascript - 带有清除条目按钮的 JQuery 电子邮件表单，尝试添加 * 后没有错误消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50535179/