Question

我正在尝试使用jQuery在span标记中显示错误消息。如果输入正确但文本不会显示，我可以在红色框和绿色框中显示表单字段。我是编码的新手，并一直在网上寻找想法和修复，我知道我错过了一些东西，它可能很简单，但我正在绞尽脑汁。

$(document).ready(function() {

  // Name can't be blank
  $('#name').on('input', function() {
    var input = $(this);
    var is_name = input.val();
    if (is_name) {
      input.removeClass("invalid").addClass("valid");
    }
    else {
      input.removeClass("valid").addClass("invalid");
    }
  });

  // Email must be an email
  $('#email').on('input', function() {
    var input = $(this);
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    var is_email = re.test(input.val());
    if (is_email) {
      input.removeClass("invalid").addClass("valid");
    }
    else {
      input.removeClass("valid").addClass("invalid");
    }
  });

  // Message can't be blank
  $('#message').keyup(function(event) {
    var input = $(this);
    var message = $(this).val();
    console.log(message);
    if (message) {
      input.removeClass("invalid").addClass("valid");
    }
    else {
      input.removeClass("valid").addClass("invalid");
    }
  });

  // After Form Submitted Validation
  $("#contact_submit button").click(function(event) {
    var form_data = $("#contact").serializeArray();
    var error_free = true;
    for (var input in form_data) {
      var element = $("#contact_submit" + form_data[input]['name'], ['email'], ['message']);
      var valid = element.hasClass("valid");
      var error_element = $("span", element.parent());
      if (!valid) {
        error_element.removeClass("error").addClass("error_show");
        error_free = false;
      }
      else {
        error_element.removeClass("error_show").addClass("error");
      }
    }
    if (!error_free) {
      event.preventDefault();
    }
    else {
      alert('No errors: Form will be submitted');
    }
  });
});

.error {
  display: none;
  margin-left: 10px;
}
.error_show {
  color: red;
  margin-left: 10px;
}
input.invalid,
textarea.invalid {
  border: 2px solid red;
}
input.valid,
textarea.valid {
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="body">
  <form id="contact" method="post" enctype="multipart/form-data" action="">
    <h1 class="title">Contact</h1>
    <div>
      <label for="name">Your Fullname</label>
      <input type="text" id="name" name="name" required placeholder="Your Name">
      <span class="error error_show">This field is required</span>
    </div>
    <div>
      <label for="email">Your Full Email</label>
      <input name="email" type="email" id="email" required placeholder="Your Email">
      <span class="error error_show">This field is required</span>
    </div>
    <div>
      <label for="message">Message</label>
      <textarea id="message" name="message" cols="20" rows="5" required placeholder="Message"></textarea>
      <span class="error error_show">This field is required</span>
    </div>
    <div id="contact_submit">
      <button type="submit"></button>
    </div>
  </form>
</section>

Answer 1

我认为你可能会让它变得比它需要的更复杂。看看下面的代码段是否按预期方式运行。

$(document).ready(function() {


  $('#name').on('input', function() {
    var input = $(this);
    var is_name = input.val();
    if (is_name) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }


  });


  $('#email').on('input', function() {
    var input = $(this);
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    var is_email = re.test(input.val());
    if (is_email) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }

  });


  $('#message').keyup(function(event) {
    var input = $(this);
    var message = $(this).val();
    console.log(message);
    if (message) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }


  });


  $("#contact_submit #submit_button").click(function(event) {

    $("#name_error").hide();
    $("#email_error").hide();
    $("#message_error").hide();

    var success = true;
    if (!$("#name").hasClass("valid")) {
      success = false;
      $("#name_error").show();

    }
    if (!$("#email").hasClass("valid")) {
      success = false;
      $("#email_error").show();
    }
    if (!$("#message").hasClass("valid")) {
      success = false;
      $("#message_error").show();
    }

    if (success === false) {
      event.preventDefault();
    }
    else {
      alert('No errors: Form will be submitted');
    }
  });
});

.error {
      display: none;
      margin-left: 10px;
    }
    .error_show {
      color: red;
      margin-left: 10px;
      display: none;
    }
    input.invalid,
    textarea.invalid {
      border: 2px solid red;
    }
    input.valid,
    textarea.valid {
      border: 2px solid green;
    }

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <section class="body">

    <form id="contact" method="post" enctype="multipart/form-data" action="">

      <h1 class="title">Contact</h1>

      <div>
        <label for="name">Your Fullname</label>
        <input type="text" id="name" name="name" required placeholder="Your Name">
        <span id="name_error" class="error_show">This field is required</span>
      </div>

      <div>
        <label for="email">Your Full Email</label>
        <input name="email" type="email" id="email" required placeholder="Your Email">
        <span id="email_error" class="error_show">This field is required</span>
      </div>

      <div>
        <label for="message">Message</label>
        <textarea id="message" name="message" cols="20" rows="5" required placeholder="Message"></textarea>
        <span id="message_error" class="error_show">This field is required</span>
      </div>

      <div id="contact_submit">
        <input type="submit" id="submit_button" value="Submit">
      </div>
    </form>

  </section>
</body>

</html>

Answer 2

 var element = $("#contact_submit" + form_data[input]['name'], ['email'], ['message']);
      var valid = element.hasClass("valid");
      var error_element = $("span", element.parent());

我认为这些线条没有选择正确的范围。我在记录error_element：

时得到了它

console.log(error_element);

这是一个带有“工作”选择器的JSFIDDLE。

  var error_element=$("#contact div span");

现在您可以更改符合您需求的选择器了！

使用jQuery无法显示错误消息

2 个答案: