joh*_*ohn 8 html javascript css jquery
我正在尝试制作一个登录表单,其中我将电子邮件地址和密码作为文本框.我已经在电子邮件地址部分进行了验证,因此它应该具有正确的电子邮件地址,并且还要检查电子邮件地址和密码文本框.
这是我的jsfiddle.
截至目前,我已添加一个警告框,Invalid如果电子邮件地址和密码文本框为空.而不是那样,我想在每个文本框的下方显示一条简单的消息,如果它们是空的,请输入您的电子邮件地址或密码？
就像在sitepoint博客上完成的一样.
这可以用我当前的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和Servlets,所以当我单击"登录"按钮时,它会将我带到另一个页面,其中包含有效的电子邮件和密码,但现在没有任何事情发生在我单击"登录"按钮并显示有效的电子邮件和密码后.
有什么想法可能是错的？
not*_*ary 10
您可以在字段之后放置静态元素并显示它们,或者您可以动态地注入验证消息.有关如何动态注入,请参阅以下示例.
此示例还遵循将焦点设置为空白字段的最佳做法,以便用户可以轻松纠正问题.
请注意,您可以轻松地将其设置为使用任何标签和字段(无论如何都是必需的字段),而不是我专门编写每个验证的示例.
你的小提琴更新了,请看这里:jsfiddle
代码:
$('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;
}
| 归档时间： |
|
| 查看次数： |
93592 次 |
| 最近记录： |