Question

我的页面上有一个表单，我想在所有输入字段旁边显示一个复选标记（勾号）。我已经尝试了几种方法来做到这一点但无法达到我想要的效果.Below是我的代码....

$(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/

由jquery在表单输入字段旁边的验证复选标记

1 个答案: