堆棧內存溢出
  簡體   English   中英

如何使用 jQuery 在每個文本框下方顯示驗證消息？

[英]How to show validation message below each textbox using jQuery?

 原文  2014-08-29 17:02:59  7   6    javascript/ jquery/ html/ css

問題描述

我正在嘗試制作一個登錄表單，其中我將電子郵件地址和密碼作為文本框。 我已經對電子郵件地址部分進行了驗證，因此它應該有正確的電子郵件地址，並且還對電子郵件地址和密碼文本框進行了空檢查。

這是我的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，所以只要我單擊“登錄”按鈕，它就會將我帶到另一個帶有有效電子郵件和密碼的頁面，但現在我單擊帶有有效電子郵件和密碼的“登錄”按鈕后什么也沒有發生。

有什么想法可能是錯的？

6 個解決方案

解決方案1
 11 已采納  2014-08-29 17:15:41

您可以在字段之后放置靜態元素並顯示它們，或者您可以動態注入驗證消息。 有關如何動態注入，請參見以下示例。

此示例還遵循將焦點設置到空白字段的最佳實踐，以便用戶可以輕松糾正問題。

請注意，您可以輕松地將其泛化為與任何標簽和字段一起使用（無論如何對於必填字段），而不是我的示例，它專門對每個驗證進行編碼。

您的小提琴已更新，請參見此處： 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;
    }

解決方案2
 0  2014-08-29 17:11:41

只是找到要插入文本的 dom 的問題。

演示jsfiddle

$().text();

解決方案3
 0  2014-08-29 17:12:43

我會這樣做的方法是創建段落標記，您希望錯誤消息具有相同的類，並在數據無效時顯示它們。 這是我的小提琴

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

我還在電子郵件和密碼輸入下方添加了段落標簽

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

解決方案4
 0  2014-08-29 17:14:22

干得好：

JS：

$('form').on('submit', function (e) {
    e.preventDefault();
    
    if (!$('#email').val()) 
        $('#email').parent().append('<span class="error">Please enter your email address.</span>');
    
    
    if(!$('#password').val())
         $('#password').parent().append('<span class="error">Please enter your password.</span>');
});

CSS：

@charset "utf-8";
/* CSS Document */

/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */

@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);

/* ---------- FONTAWESOME ---------- */

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* ---------- GENERAL ---------- */

body {
    background-color: #C0C0C0;
    color: #000;
    font-family: "Varela Round", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}

input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    -webkit-appearance: none;
}

/* ---------- LOGIN ---------- */

#login {
    margin: 50px auto;
    width: 400px;
}

#login h2 {
    background-color: #f95252;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    color: #fff;
    font-size: 28px;
    padding: 20px 26px;
}

#login h2 span[class*="fontawesome-"] {
    margin-right: 14px;
}

#login fieldset {
    background-color: #fff;
    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    border-radius: 0 0 20px 20px;
    padding: 20px 26px;
}

#login fieldset div {
    color: #777;
    margin-bottom: 14px;
}

#login fieldset p:last-child {
    margin-bottom: 0;
}

#login fieldset input {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#login fieldset .error {
    display: block;
     color: #FF1000;
    font-size: 12px;
}
}

#login fieldset input[type="email"], #login fieldset input[type="password"] {
    background-color: #eee;
    color: #777;
    padding: 4px 10px;
    width: 328px;
}

#login fieldset input[type="submit"] {
    background-color: #33cc77;
    color: #fff;
    display: block;
    margin: 0 auto;
    padding: 4px 0;
    width: 100px;
}

#login fieldset input[type="submit"]:hover {
    background-color: #28ad63;
}

HTML：

<div id="login">

<h2><span class="fontawesome-lock"></span>Sign In</h2>

<form action="javascript:void(0);" method="POST">

    <fieldset>

        <div><label for="email">E-mail address</label></div>
        <div><input type="email" id="email" /></div>

        <div><label for="password">Password</label></div>
        <div><input type="password" id="password" /></div> <!-- JS because of IE support; better: placeholder="Email" -->

        <div><input type="submit" value="Sign In"></div>

    </fieldset>

</form>

和小提琴： jsfiddle

解決方案5
 0  2014-08-29 18:13:23

這是可能對您有用的簡單解決方案。

檢查此解決方案

$('form').on('submit', function (e) {
e.preventDefault();
var emailBox=$("#email");
var passBox=$("#password");
if (!emailBox.val() || !passBox.val()) {
    $(".validationText").text("Please Enter Value").show();
}
else if(!IsEmail(emailBox.val()))
{
    emailBox.prev().text("Invalid E-mail").show();
}
$("input#email, input#password").focus(function(){
    $(this).prev(".validationText").hide();
});});

解決方案6
 0  2021-05-21 16:33:09

我們將使用 jQuery 驗證插件

我們必須在我們的項目中包含必要的文件。 有兩個不同的文件要包含。 第一個是核心文件，其中包含插件的核心功能，包括從不同的驗證方法到一些自定義選擇器的所有內容。 第二個文件包含驗證信用卡號碼和美國電話號碼等輸入的其他方法。

您可以通過包管理器（如 Bower 或 NPM）將這些文件添加到您的項目中。

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

HTML

   <form id="basic-form" action="" method="post">
    <p>
      <label for="name">Name <span>(required, at least 3 characters)</span></label>
      <input id="name" name="name" minlength="3" type="text" required>
    </p>
    <p>
      <label for="email">E-Mail <span>(required)</span></label>
      <input id="email" type="email" name="email" required>
    </p>
    <p>
      <input class="submit" type="submit" value="SUBMIT">
    </p>
</form>

CSS

   body {
  margin: 20px 0;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.25rem;
  width: 300px;
}

form, p {
  margin: 20px;
}

p.note {
  font-size: 1rem;
  color: red;
}

input {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: 'Lato';
  width: 300px;
  margin-top: 10px;
}

label {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}

label span {
  font-size: 1rem;
}

label.error {
    color: red;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}

input.error {
    border: 1px dashed red;
    font-weight: 300;
    color: red;
}

[type="submit"], [type="reset"], button, html [type="button"] {
    margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}

Java腳本

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

這是基於您已經添加了所需的 JavaScript 文件的假設。 添加這些 JavaScript 行將確保您的表單得到正確驗證並顯示所有錯誤消息。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用jQuery在文本框下方顯示消息 如何使用jQuery Validation插件在元素下方顯示錯誤消息 每個文本框的驗證錯誤消息 如何在表單字段下方顯示jQuery表單驗證插件錯誤 如何在jquery中的rate按鈕下面顯示消息狀態？ Jquery 驗證顯示成功消息 如何使用jquery驗證重置錯誤消息？ 使用jQuery驗證在每個引導選項卡中顯示錯誤 專注於下面的文本框，而不是相鄰的使用jQuery 如何使用 jquery 顯示 bootstrap 4 驗證反饋？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM