如何在无效输入后设置 DOM 样式?

Question

我需要任务的帮助。我必须在键入的电子邮件无效后更改文本的颜色，表单边框并附加新段落。我用JS写了这样的代码：

$(document).ready(function () {
if ($("#mail").is(':invalid')) {
$("#mail_label").css('color', 'red');
$("#mail").css('border', '1px solid red');
var para = document.createElement("p");
var node = document.createTextNode("Invalid email address");
para.appendChild(node);
var element = document.getElementById("new_paragraph");
element.appendChild(para);
para.setAttribute('id', 'new_text');
$("#new_text").css({'color': 'red', 'text-align': 'right', 'margin-right': '5%', 'font-size': '12px'});
};
});

它按照我的意愿设置我的 DOM 样式，但从一开始就因为我的占位符是"输入您的电子邮件地址"。我希望它在无效输入后设置样式。我怎样才能实现它？

例如，如果我将占位符更改为 [e-mail] 我的网站具有正常的样式。但是当我输入无效邮件时，代码不会运行。

你能帮帮我吗？这对我来说非常重要，因为这是我的实习招聘任务。

Answer 1

你最好使用 class 和 css 来设置文档的样式。

这是一个使用">classList">和"cloneNode">进行一些优化的代码。

var para = document.createElement("p");
var node = document.createTextNode("Invalid email address");
para.appendChild(node);
$(document).ready(function() {
var new_paragraph = document.getElementById("new_paragraph");
document.getElementById("mail").addEventListener("input", mail_changed);
});
function mail_changed() {
if (!this.checkValidity()) {
this.parentElement.classList.add("error");
new_paragraph.appendChild(para.cloneNode(true));
} else {
this.parentElement.classList.remove("error");
new_paragraph.innerHTML = "";
}
}

form p.error input {
border: 1px solid red;
}
form p.error label {
color: red;
}
#new_paragraph p {
color: red;
text-align: right;
margin-right: 5%;
font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<label for="mail" id="mail_label">Mail: </label>
<input type="email" id="mail" name="mail" placeholder="Enter your mail">
</p>
</form>
<div id="new_paragraph"></div>