你好世界

Question

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

以下是代码：

＆＃13;

(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);

＆＃13;

<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>

＆＃13;

Answer 1

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

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

＆＃13;

(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);

＆＃13;

span.form_error {
  color: #C00;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用text()将字符串添加到元素或使用html()添加HTML代码。

示例：

var text = 'hello world';
$('div#textHere').text(text);

var htmlCode = "<strong>Hello</strong> World";
$('div#htmlHere').html(htmlCode);

text()和html()的文档。

Answer 3

如果要获取表单字段值，请使用$('#id').val();，val将从表单字段中获取值。然后你就可以使用它$('#id').html('Enter val here')。

Answer 4

使用可以使用text()或html()

不同：

1）如果您只检索文字，则可以使用text()

2）如果您使用文本检索html元素，那么您可以使用html();

例如1： -

var text1="hello world";

$(".text").text(text1) ==＆gt;你好世界

$(".text").html(text1) ==＆gt;你好世界

例如2： -

var text2="<h1>hello world</h1>";

$(".text").text(text2) ==＆gt; “＆LT; h1＆gt; hello world＆lt; / H1＆GT;'

$(".text").html(text2) ==>

你好世界

`

jQuery将可变内容添加到DIV中

4 个答案:

你好世界