jQuery表單輸入字段旁邊的驗證復選標記

Question

我的頁面上有一個表單，我想在所有輸入字段旁邊顯示一個復選標記。 我已經嘗試了幾種方法來執行此操作，但是無法實現我想要的。下面是我的代碼...。

 $(document).ready(function() { $("#myForm").on('submit', function(event) { event.preventDefault(); var firstName = $('#first').val(); var lastName = $('#last').val(); var email = $('#email').val(); var pass = $('#password').val(); if (firstName == "") { $('#first-name-error').text("Please enter your first name"); } else if (firstName.length > 0) { $(this).next().show(); } if (lastName == "") { $('#last-name-error').text("Please enter your last name"); } if (email == "") { $('#email-error').text("Please enter your email address"); } else if (email == "aisha_salman3@outlook.com") { $('#email-error').text("This email is already taken!"); } if (pass == "") { $('#password-error').text("Please enter your password"); } else if (pass.length < 8) { $('#password-error').text("Short passwords are too easy to guess.Try one with at least 8 characters"); } }); }); 

 .tick { background: url(images/done-tick.png) no-repeat; width: 20px; height: 20px; position: absolute; margin: 5px 20px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <main> <div class="container"> <div class="row"> <div class="col-lg-6 col-lg-offset-3"> <form id="myForm" action="" method=""> <fieldset> <legend>Create Account</legend> <div class="form-group"> <label for="first">First Name</label> <p id="first-name-error"></p> <input type="text" class="form-control" id="first" maxlength="10" placeholder="your first name ..." autofocus /> <span class="tick"></span> </div> <div class="form-group"> <label for="last">Last Name</label> <p id="last-name-error"></p> <input type="text" class="form-control" id="last" maxlength="10" placeholder="your last name ..." /> <span class="tick"></span> </div> <div class="form-group"> <label for="email">Email</label> <p id="email-error"></p> <input type="email" class="form-control" id="email" placeholder="your email ..." /> <span class="tick"></span> </div> <div class="form-group"> <label for="password">Password</label> <p id="password-error"></p> <input type="password" class="form-control" id="password" placeholder="your password ..." /> <span class="tick"></span> </div> </fieldset> <input class="btn" type="submit" value="Sign Up " /> </form> </div> </div> </div> </main> 

請指導我。謝謝！

Answer 1

您似乎正在引用它，它是表單元素，而不是名字。 因此，當您獲得下一個時，您並沒有獲得任何要素。 您的代碼應如下所示：

if (firstName == "") {
      $('#first-name-error').text("Please enter your first name");
} else if (firstName.length > 0) {
      $('#first').next().show();
}

這是用來顯示其工作方式的小提琴。 https://jsfiddle.net/ukg82xqr/2/