如何使用jQuery在每个文本框下方显示验证消息？

小编典典

如何使用jQuery在每个文本框下方显示验证消息？

css

我正在尝试制作一个登录表单，其中将电子邮件地址和密码作为文本框。我已经在电子邮件地址部分进行了验证，以便它应该具有正确的电子邮件地址，并且在空白处检查电子邮件地址和密码文本框。

到目前为止，我已经添加了一个警告框，说明Invalid电子邮件地址和密码文本框是否为空。取而代之的是，我想在每个文本框的下方显示一个简单的消息，如果没有输入，请输入您的电子邮件地址或密码？

这可以在我当前的html表单中执行吗？

更新：-

<body>

    <div id="login">

        <h2>
            <span class="fontawesome-lock"></span>Sign In
        </h2>

        <form action="login" method="POST">
            <fieldset>
                <p>
                    <label for="email">E-mail address</label>
                </p>
                <p>
                    <input type="email" id="email" name="email">
                </p>
                <p>
                    <label for="password">Password</label>
                </p>
                <p>
                    <input type="password" name="password" id="password">
                </p>
                <p>
                    <input type="submit" value="Sign In">
                </p>

            </fieldset>

        </form>

    </div>
    <!-- end login -->

</body>

而我的js-

<script>
    $(document).ready(function() {
        $('form').on('submit', function (e) {
            e.preventDefault();

            if (!$('#email').val()) {
                if ($("#email").parent().next(".validation").length == 0) // only add if not added
                {
                    $("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>");
                }
            } else {
                $("#email").parent().next(".validation").remove(); // remove it
            }
            if (!$('#password').val()) {
                if ($("#password").parent().next(".validation").length == 0) // only add if not added
                {
                    $("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");

                }
            } else {
                $("#password").parent().next(".validation").remove(); // remove it
            }
        }); 
    });

</script>

我正在使用JSP和Servlet，因此，一旦我单击“登录”按钮，它就将我带到另一个包含有效电子邮件和密码的页面，但是现在，单击“具有有效电子邮件和密码的登录”按钮后，什么也没有发生。

有什么想法可能是错的吗？

阅读 590

2020-05-16

共1个答案

小编典典

您可以将静态元素放在字段之后并显示它们，也可以动态注入验证消息。请参阅以下示例，了解如何动态注入。

此示例还遵循将焦点设置为空白字段的最佳做法，因此用户可以轻松地解决问题。

请注意，您可以轻松地将其通用化以与任何标签和字段一起使用（无论如何对于必填字段），而不是我的示例专门为每个验证编写代码。

编码：

$('form').on('submit', function (e) {
    var focusSet = false;
    if (!$('#email').val()) {
        if ($("#email").parent().next(".validation").length == 0) // only add if not added
        {
            $("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>");
        }
        e.preventDefault(); // prevent form from POST to server
        $('#email').focus();
        focusSet = true;
    } else {
        $("#email").parent().next(".validation").remove(); // remove it
    }
    if (!$('#password').val()) {
        if ($("#password").parent().next(".validation").length == 0) // only add if not added
        {
            $("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
        }
        e.preventDefault(); // prevent form from POST to server
        if (!focusSet) {
            $("#password").focus();
        }
    } else {
        $("#password").parent().next(".validation").remove(); // remove it
    }
});

CSS：

    .validation
    {
      color: red;
      margin-bottom: 20px;
    }

2020-05-16