Javascript 表单验证-用于从服务器捕获错误消息的内联气泡_Javascript_Html_Forms_Validation

Javascript 表单验证-用于从服务器捕获错误消息的内联气泡

javascript html forms validation

Javascript 表单验证-用于从服务器捕获错误消息的内联气泡,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我正在构建一个登录页面，并一直在尝试HTML5表单验证功能。我喜欢气泡内联错误消息，例如，在输入元素中输入“email”和“password”。我自定义了这些消息，没有任何问题。我的问题是在提交时从服务器端捕获响应消息，并在“登录”按钮下方显示为内联气泡消息图像的样本我不知道如何强制将服务器错误响应消息捕获为下面“登录”按钮下方的内联气泡。任何帮助都会很好。谢谢代码： <head> <script type="text/javascript"> fun

我正在构建一个登录页面，并一直在尝试HTML5表单验证功能。我喜欢气泡内联错误消息，例如，在输入元素中输入“email”和“password”。我自定义了这些消息，没有任何问题。我的问题是在提交时从服务器端捕获响应消息，并在“登录”按钮下方显示为内联气泡消息

图像的样本

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

代码：

 <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>


函数init（）{
document.getElementById（“email”）.focus（）；
}
功能错误（输入）{
if（document.getElementById（“email”）.childNodes.item（0）.value.length==0）{
input.setCustomValidity（“请填写此字段”）；
}否则{
input.setCustomValidity（“请输入有效的电子邮件地址”）；
}
}