我正在我的网站上创建联系表,但我卡住了。我不知道如何在我的网站上每次输入后从变量中放置内容。我可以将它们显示到 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>
最佳答案
首先请注意,您可能正在尝试检查字段是否都具有值。如果是这样,您应该将错误消息生成逻辑放在 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>
关于javascript - jQuery 将变量内容添加到 DIV 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44030048/