Question

我正在为我的JavaScript / Jquery类做作业。我有一个电子邮件报名表。我需要在Clear Entries按钮中添加一个事件处理程序，并将星号添加回表单字段末尾的span。

这是我的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>&nbsp;</label>
            <input type="button" id="join_list" value="Join our List"><br>

            <label>&nbsp;</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（）的文本（ “*”）;”。没有错误消息告诉我什么是错的，但星号没有出现，所以我写这个语句的方式是错误的。应该怎么做？

Answer 1

您使用错误span 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("*");

瞧！

Answer 2

你已经在每个输入文本循环，$（this）.next（）。text（＆＃39; *＆＃39;）;

$("#clear_entries").click (
        function () {
            $("input[type=text]").each(function () {
                $(this).val(" ");
                $(this).next().text('*');
            });

        });

带有明确条目按钮的JQuery电子邮件表单，尝试添加* back没有错误消息

2 个答案: