Question

我正在构建一个登录页面，我一直在尝试使用HTML5表单验证功能。我喜欢气泡内联错误消息，例如在输入元素的类型“电子邮件”＆amp; “密码”。我没有任何问题地定制了这些消息。我的问题是在提交时从服务器端捕获响应消息，并将其显示为“登录”按钮下方的内联气泡消息。

图像样本。

我不确定如何强制将服务器错误响应消息捕获为下方“登录”按钮下方的内联气泡。
任何帮助都会很棒感谢。

代码：

 <head>
 <script type="text/javascript">
 function init() {
    document.getElementById("email").focus();
 }
 function showerror(input) {
    if (document.getElementById("email").childNodes.item(0).value.length == 0) {
        input.setCustomValidity("Please fill out this field");
    } else {
        input.setCustomValidity("Please enter a valid email address");
    }

}
 </script>
 </head>

 <body onload="init();showx()">
<br />
<br />
<br />
<header>
    <div id="header-center-11x12">
        <img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
            alt="goeasyhome" />
    </div>
</header>

<br />
<div id="main-content">
    <form method="post" action="j_security_check">
        <div id="email">
            <input type="email" placeholder="Email Address" name="j_username"
                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"
                oninvalid="showerror(this)" onchange="this.setCustomValidity('')"
                required="required" />
        </div>
        <div id="password">
            <input type="password" placeholder="Password" name="j_password"
                required="required" />
        </div>
        <br />
        <div id="signin">
            <input type="submit" value="Sign In" />
        </div>
    </form>
    <br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot
        Password? </a> <a class="passwdsignup-color signup-position"
        href="/signup.jsp">Sign Up?</a>
</div>
 </body>

表单验证 - 内联冒泡以捕获来自服务器的错误消息

0 个答案: