如何使用jquery在每个文本框下面显示验证消息？ [英] How to show validation message below each textbox using jquery?
问题描述
我试图创建一个登录表单，其中我有电子邮件地址和密码作为文本框。我已经对电子邮件地址部分进行了验证，以便它应该具有正确的电子邮件地址，并且对于电子邮件地址和密码文本框的空检查。
I am trying to make a login form in which I have email address and password as the textbox. I have done the validation on the email address part so that it should have proper email address and also on the empty check both for email address and password text box.
这里是我的 jsfiddle 。
截至目前，我添加了一个警告框，说如果电子邮件地址和密码文本框为空，无效。而不是这样，我想在每个文本框下面显示一个简单的消息，如果它们是空的，请输入您的电子邮件地址或密码？
As of now, I have added an alert box saying, Invalid if email address and password textbox is empty. Instead of that, I would like to show a simple message just below each text box saying , please enter your email address or password if they are empty?
已在 sitepoint博客上完成。
这是否可以在我目前的html表单中进行？
Is this possible to do in my current html form?
更新： >
Update:-
<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，所以一旦我点击登录按钮，到另一个页面，有效的电子邮件和密码更早，但现在没有什么发生后，我单击登录按钮与有效的电子邮件和密码。
I am working with JSP and Servlets so as soon as I click Sign In button, it was taking me to another page with valid email and password earlier but now nothing is happening after I click Sign In button with valid email and password.
任何想法可能会出错？
推荐答案
静态元素之后的字段并显示它们，或者您可以动态注入验证消息。请参阅下面的示例以了解如何动态注入。
You could put static elements after the fields and show them, or you could inject the validation message dynamically. See the below example for how to inject dynamically.
此示例还遵循将焦点设置为空白字段的最佳做法，以便用户可以轻松更正此问题。
This example also follows the best practice of setting focus to the blank field so user can easily correct the issue.
请注意，你可以很容易地泛化这个工作与任何标签&
Note that you could easily genericize this to work with any label & field (for required fields anyway), instead of my example which specifically codes each validation.
您的小提琴已更新，请参阅这里： jsfiddle
Your fiddle is updated, see here: 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;
}
这篇关于如何使用jquery在每个文本框下面显示验证消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
