javascript - jQuery 将变量内容添加到 DIV 中

Question

我正在我的网站上创建联系表，但我卡住了。我不知道如何在我的网站上每次输入后从变量中放置内容。我可以将它们显示到 console.log 中并且工作完美，但我不知道如何将其放在网站上。

代码如下:

(function($) {
  $(document).ready(function() {
    var form = $(".contact_form"),
      fields = $("[data-error]");

    fields.on("click", function() {
      $(this).removeAttr('placeholder');
    });

    fields.on("blur", function() {
      var field = $(this);
      field.toggleClass("form_error", $.trim(field.val()) === "");
    });

    form.on("submit", function(e) {
      var hasErrors = false;
      
      fields.each(function(i, elem) {
        var field = $(elem),
          empty = $.trim(field.val()) === "",
          errors = field.data("error");

        console.log(errors);

        // HERE IS ERROR VAR 
        // sth here to put it into html
        
        field.toggleClass("form_error", empty);

        if (empty) {
          hasErrors = true;
        }
      });

      if (!hasErrors) {
        form.submit();
      } else {
        e.preventDefault();
      }
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" accept-charset="utf-8" class="contact_form">
  <input type="text" placeholder="Imię" data-error="Podaj imię">
  <input type="text" placeholder="Nazwisko" data-error="Podaj nazwisko">
  <input type="email" placeholder="E-mail" data-error="Podaj poprawny adres e-mail">
  <input type="text" placeholder="Kontakt" data-error="Podaj poprawny numer telefonu">
  <textarea name="message" class="textarea_field" placeholder="WIADOMOŚĆ" data-error="Wpisz treść wiadomości"></textarea>
  <button type="submit" class="przycisk">Wyślij</button>
</form>

Answer 1

首先请注意，您可能正在尝试检查字段是否都具有值。如果是这样，您应该将错误消息生成逻辑放在 if (empty) 代码块中。

要真正为消息创建 HTML，您可以使用 after() 方法在相关的 input 元素之后插入错误消息。如果您还将错误包装在一个元素中，例如 span，它有一个类，您可以轻松地使用它来 remove() 提交表单时的元素重新评估。试试这个:

(function($) {
  $(document).ready(function() {
    var form = $(".contact_form"),
      fields = $("[data-error]");

    fields.on("click", function() {
      $(this).removeAttr('placeholder');
    });

    fields.on("blur", function() {
      var field = $(this);
      var valid = $.trim(field.val()) !== "";
      field.toggleClass("form_error", !valid).next('span.form_error').remove();
      if (!valid)
        field.after('<span class="form_error">' + $(this).data('error') + '</span>'); // add new error messages
    });

    form.on("submit", function(e) {
      var hasErrors = false;
      $('span.form_error').remove(); // Remove any old errors when submitting the form

      fields.each(function(i, elem) {
        var field = $(elem),
          empty = $.trim(field.val()) === "",
          errors = field.data("error");

        if (empty) {
          hasErrors = true;
          field.after('<span class="form_error">' + errors + '</span>'); // add new error messages
          field.toggleClass("form_error", empty);
        }
      });

      if (!hasErrors) {
        form.submit();
      } else {
        e.preventDefault();
      }
    });
  });
})(jQuery);

span.form_error {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" accept-charset="utf-8" class="contact_form">
  <input type="text" placeholder="Imię" data-error="Podaj imię">
  <input type="text" placeholder="Nazwisko" data-error="Podaj nazwisko">
  <input type="email" placeholder="E-mail" data-error="Podaj poprawny adres e-mail">
  <input type="text" placeholder="Kontakt" data-error="Podaj poprawny numer telefonu">
  <textarea name="message" class="textarea_field" placeholder="WIADOMOŚĆ" data-error="Wpisz treść wiadomości"></textarea>
  <button type="submit" class="przycisk">Wyślij</button>
</form>