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

bxgwgixi  于 2024-01-07  发布在  jQuery
关注(0)|答案(7)|浏览(210)

我试图使一个登录表单中，我有电子邮件地址和密码作为文本框。我已经做了电子邮件地址的一部分，使它应该有适当的电子邮件地址，也对空检查电子邮件地址和密码文本框验证。
这是我的jsfiddle。
到目前为止，我已经添加了一个警告框说，Invalid如果电子邮件地址和密码文本框是空的。而不是，我想显示一个简单的消息，就在每个文本框说，请输入您的电子邮件地址或密码，如果他们是空的？
就像在sitepoint blog上一样。
这可以在我当前的HTML表单中实现吗？

更新：-

  1. <body>
  3.     <div id="login">
  5.         <h2>
  6.             <span class="fontawesome-lock"></span>Sign In
  7.         </h2>
  9.         <form action="login" method="POST">
  10.             <fieldset>
  11.                 <p>
  12.                     <label for="email">E-mail address</label>
  13.                 </p>
  14.                 <p>
  15.                     <input type="email" id="email" name="email">
  16.                 </p>
  17.                 <p>
  18.                     <label for="password">Password</label>
  19.                 </p>
  20.                 <p>
  21.                     <input type="password" name="password" id="password">
  22.                 </p>
  23.                 <p>
  24.                     <input type="submit" value="Sign In">
  25.                 </p>
  27.             </fieldset>
  29.         </form>
  31.     </div>
  32.     <!-- end login -->
  34. </body>

字符串
我的男朋友-

  1. <script>
  2.     $(document).ready(function() {
  3.         $('form').on('submit', function (e) {
  4.             e.preventDefault();
  6.             if (!$('#email').val()) {
  7.                 if ($("#email").parent().next(".validation").length == 0) // only add if not added
  8.                 {
  9.                     $("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>");
  10.                 }
  11.             } else {
  12.                 $("#email").parent().next(".validation").remove(); // remove it
  13.             }
  14.             if (!$('#password').val()) {
  15.                 if ($("#password").parent().next(".validation").length == 0) // only add if not added
  16.                 {
  17.                     $("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
  19.                 }
  20.             } else {
  21.                 $("#password").parent().next(".validation").remove(); // remove it
  22.             }
  23.         }); 
  24.     });
  26. </script>

型
我正在使用JSP和Servlet，所以当我点击登录按钮时，它会将我带到另一个带有有效电子邮件和密码的页面，但现在在我点击登录按钮后，没有任何事情发生。
有什么不对劲的吗？

jquery

7条答案

按热度按时间
bwitn5fc

bwitn5fc1#

你可以把静态元素放在字段后面并显示它们，或者你可以动态地注入验证消息。
此示例还遵循将焦点设置为空白字段的最佳实践，以便用户可以轻松更正问题。
请注意，您可以轻松地将其泛化到任何标签和字段（无论如何都是必填字段），而不是我的示例，它专门编码每个验证。
您的小提琴已更新，请参阅此处：jsfiddle
代码：

  1. $('form').on('submit', function (e) {
  2.     var focusSet = false;
  3.     if (!$('#email').val()) {
  4.         if ($("#email").parent().next(".validation").length == 0) // only add if not added
  5.         {
  6.             $("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>");
  7.         }
  8.         e.preventDefault(); // prevent form from POST to server
  9.         $('#email').focus();
  10.         focusSet = true;
  11.     } else {
  12.         $("#email").parent().next(".validation").remove(); // remove it
  13.     }
  14.     if (!$('#password').val()) {
  15.         if ($("#password").parent().next(".validation").length == 0) // only add if not added
  16.         {
  17.             $("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
  18.         }
  19.         e.preventDefault(); // prevent form from POST to server
  20.         if (!focusSet) {
  21.             $("#password").focus();
  22.         }
  23.     } else {
  24.         $("#password").parent().next(".validation").remove(); // remove it
  25.     }
  26. });

字符串
CSS：

  1. .validation
  2.     {
  3.       color: red;
  4.       margin-bottom: 20px;
  5.     }

型

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
k4aesqcs

k4aesqcs2#

我的方法是创建段落标签，在其中您希望错误消息与相同的类一起显示，并在数据无效时显示它们。

  1. if ($('#email').val() == '' || !$('#password').val() == '') {
  2.     $('.loginError').show();
  3.     return false;
  4. }

字符串
我还在电子邮件和密码输入下面添加了段落标签

  1. <p class="loginError" style="display:none;">please enter your email address or password.</p>

型

赞(0）分享  回复(0）举报  2024-01-07
qhhrdooz

qhhrdooz3#

给您：
JS：

  1. $('form').on('submit', function (e) {
  2.     e.preventDefault();
  3.     
  4.     if (!$('#email').val()) 
  5.         $('#email').parent().append('<span class="error">Please enter your email address.</span>');
  6.     
  7.     
  8.     if(!$('#password').val())
  9.          $('#password').parent().append('<span class="error">Please enter your password.</span>');
  10. });

字符串
CSS：

  1. @charset "utf-8";
  2. /* CSS Document */
  4. /* ---------- FONTAWESOME ---------- */
  5. /* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
  6. /* ---------- http://weloveiconfonts.com/ ---------- */
  8. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  10. /* ---------- ERIC MEYER'S RESET CSS ---------- */
  11. /* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
  13. @import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
  15. /* ---------- FONTAWESOME ---------- */
  17. [class*="fontawesome-"]:before {
  18.   font-family: 'FontAwesome', sans-serif;
  19. }
  21. /* ---------- GENERAL ---------- */
  23. body {
  24.     background-color: #C0C0C0;
  25.     color: #000;
  26.     font-family: "Varela Round", Arial, Helvetica, sans-serif;
  27.     font-size: 16px;
  28.     line-height: 1.5em;
  29. }
  31. input {
  32.     border: none;
  33.     font-family: inherit;
  34.     font-size: inherit;
  35.     font-weight: inherit;
  36.     line-height: inherit;
  37.     -webkit-appearance: none;
  38. }
  40. /* ---------- LOGIN ---------- */
  42. #login {
  43.     margin: 50px auto;
  44.     width: 400px;
  45. }
  47. #login h2 {
  48.     background-color: #f95252;
  49.     -webkit-border-radius: 20px 20px 0 0;
  50.     -moz-border-radius: 20px 20px 0 0;
  51.     border-radius: 20px 20px 0 0;
  52.     color: #fff;
  53.     font-size: 28px;
  54.     padding: 20px 26px;
  55. }
  57. #login h2 span[class*="fontawesome-"] {
  58.     margin-right: 14px;
  59. }
  61. #login fieldset {
  62.     background-color: #fff;
  63.     -webkit-border-radius: 0 0 20px 20px;
  64.     -moz-border-radius: 0 0 20px 20px;
  65.     border-radius: 0 0 20px 20px;
  66.     padding: 20px 26px;
  67. }
  69. #login fieldset div {
  70.     color: #777;
  71.     margin-bottom: 14px;
  72. }
  74. #login fieldset p:last-child {
  75.     margin-bottom: 0;
  76. }
  78. #login fieldset input {
  79.     -webkit-border-radius: 3px;
  80.     -moz-border-radius: 3px;
  81.     border-radius: 3px;
  82. }
  84. #login fieldset .error {
  85.     display: block;
  86.      color: #FF1000;
  87.     font-size: 12px;
  88. }
  89. }
  91. #login fieldset input[type="email"], #login fieldset input[type="password"] {
  92.     background-color: #eee;
  93.     color: #777;
  94.     padding: 4px 10px;
  95.     width: 328px;
  96. }
  98. #login fieldset input[type="submit"] {
  99.     background-color: #33cc77;
  100.     color: #fff;
  101.     display: block;
  102.     margin: 0 auto;
  103.     padding: 4px 0;
  104.     width: 100px;
  105. }
  107. #login fieldset input[type="submit"]:hover {
  108.     background-color: #28ad63;
  109. }

型
超文本标记语言：

  1. <div id="login">
  3. <h2><span class="fontawesome-lock"></span>Sign In</h2>
  5. <form action="javascript:void(0);" method="POST">
  7.     <fieldset>
  9.         <div><label for="email">E-mail address</label></div>
  10.         <div><input type="email" id="email" /></div>
  12.         <div><label for="password">Password</label></div>
  13.         <div><input type="password" id="password" /></div> <!-- JS because of IE support; better: placeholder="Email" -->
  15.         <div><input type="submit" value="Sign In"></div>
  17.     </fieldset>
  19. </form>

型
小提琴：jsfiddle

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
a6b3iqyw

a6b3iqyw4#

这仅仅是找到你想要插入文本的DOM的问题。
DEMO jsfiddle

  1. $().text();

字符串

赞(0）分享  回复(0）举报  2024-01-07
5jvtdoz2

5jvtdoz25#

这是一个简单的解决方案，可以为您工作。
Check this solution

  1. $('form').on('submit', function (e) {
  2. e.preventDefault();
  3. var emailBox=$("#email");
  4. var passBox=$("#password");
  5. if (!emailBox.val() || !passBox.val()) {
  6.     $(".validationText").text("Please Enter Value").show();
  7. }
  8. else if(!IsEmail(emailBox.val()))
  9. {
  10.     emailBox.prev().text("Invalid E-mail").show();
  11. }
  12. $("input#email, input#password").focus(function(){
  13.     $(this).prev(".validationText").hide();
  14. });});

字符串

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
368yc8dk

368yc8dk6#

我们将使用jQuery验证插件

我们必须在我们的项目中包含必要的文件。有两个不同的文件要包含。第一个是核心文件，它包含插件的核心功能，包括从不同的验证方法到一些自定义选择器的所有内容。第二个文件包含其他方法来验证输入，如信用卡号码和美国电话号码。
您可以通过包管理器（如Bower或NPM）将这些文件添加到项目中。

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

字符串

HTML格式

  1. <form id="basic-form" action="" method="post">
  2.     <p>
  3.       <label for="name">Name <span>(required, at least 3 characters)</span></label>
  4.       <input id="name" name="name" minlength="3" type="text" required>
  5.     </p>
  6.     <p>
  7.       <label for="email">E-Mail <span>(required)</span></label>
  8.       <input id="email" type="email" name="email" required>
  9.     </p>
  10.     <p>
  11.       <input class="submit" type="submit" value="SUBMIT">
  12.     </p>
  13. </form>

型

CSS

  1. body {
  2.   margin: 20px 0;
  3.   font-family: 'Lato';
  4.   font-weight: 300;
  5.   font-size: 1.25rem;
  6.   width: 300px;
  7. }
  9. form, p {
  10.   margin: 20px;
  11. }
  13. p.note {
  14.   font-size: 1rem;
  15.   color: red;
  16. }
  18. input {
  19.   border-radius: 5px;
  20.   border: 1px solid #ccc;
  21.   padding: 4px;
  22.   font-family: 'Lato';
  23.   width: 300px;
  24.   margin-top: 10px;
  25. }
  27. label {
  28.   width: 300px;
  29.   font-weight: bold;
  30.   display: inline-block;
  31.   margin-top: 20px;
  32. }
  34. label span {
  35.   font-size: 1rem;
  36. }
  38. label.error {
  39.     color: red;
  40.     font-size: 1rem;
  41.     display: block;
  42.     margin-top: 5px;
  43. }
  45. input.error {
  46.     border: 1px dashed red;
  47.     font-weight: 300;
  48.     color: red;
  49. }
  51. [type="submit"], [type="reset"], button, html [type="button"] {
  52.     margin-left: 0;
  53.     border-radius: 0;
  54.     background: black;
  55.     color: white;
  56.     border: none;
  57.     font-weight: 300;
  58.     padding: 10px 0;
  59.     line-height: 1;
  60. }

型

Java脚本

  1. $(document).ready(function() {
  2.   $("#basic-form").validate();
  3. });

型
这是基于您已经添加了所需的JavaScript文件的假设。添加这些JavaScript行将确保您的表单正确验证并显示所有错误消息。

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
rkue9o1l

rkue9o1l7#

2023回答：我采用了Dilip Kumar Choudhary的回答，并使用新的CSS规则将其删除。

CSS：

  1. label:has(input[required]) span.LabelTxt:first-child::after {
  2.   content: "*";
  3.   color: red;
  4. }
  5. span.ErrMsgTxt{visibility:hidden;color: red;font-size:smaller;}
  6. input:user-invalid ~ span.ErrMsgTxt{visibility:visible;}

字符串

HTML：

  1. <form action="" method="post" onsubmit="CheckFormValidity()">
  2. <label>
  3.     <span class="LabelTxt">Name</span>
  4.     <input name="name" pattern="[A-Za-z]{3,}" type="text" required>
  5.     <span class="ErrMsgTxt">Name must be at least three characters long</span>
  6. </label>
  7. <br>
  8. <label>
  9.     <span class="LabelTxt">E-Mail</span>
  10.     <input type="email" name="email" required>
  11.     <span class="ErrMsgTxt">Valid e-mail required</span>
  12. </label>
  13. <br>
  14. <input class="submit" type="submit" value="SUBMIT">
  15. </form>

型

JavaScript：

  1. CheckFormValidity(targetedForm=event.target){
  2.     if (!targetedForm.checkValidity()) {
  3.         event.preventDefault();return;
  4.     }
  5. }

型

展开查看全部
赞(0）分享  回复(0）举报  2024-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com