如何防止Jquery重复添加？

Question

我有一些jQuery代码，用于检查用户输入的电子邮件地址是否正确。如果不正确，用户可以返回并更改他/她的电子邮件。然而，我的代码会在同一个错误信息中追加多次，因为错误信息不断被添加在我的errorsdiv中。我该如何修改代码，使得只允许错误信息追加一次？如果email变量是true，我也想删除这个错误信息。还有其他的验证错误被放置在这个div中。

jQuery:

var email = $('#email').val();
email = validateEmail(email);
if (email = "false") {
    $('#errors').append("<p>Please enter a valid email</p>");
}

validateEmail 函数将根据电子邮件地址的有效性返回 true 或 false。

- kirby

---

为什么要重复造轮子呢？jQuery可以为您验证电子邮件 http://docs.jquery.com/Plugins/Validation - Green Day

Answer 1

var email = $('#email').val();
email = validateEmail(email);
if (email == "false"){
      $('#email_error').remove();
      $('#errors').append("<p id='email_error'>Please enter a valid email</p>");
}

- redmoon7777

---

我应该提到这个div中还有其他的错误，所以使用.html可能会清除其他的错误。 - kirby

谢谢，但它没有起作用。我使用ID而不是类来使其工作，并只是使用$('#email_error').remove();。 - kirby

我稍微修改了你的答案，去掉了整个附加的DIV。请看下面。 - Kushal Jayswal

Answer 2

当您附加电子邮件错误时，请使用类“emailerror”进行指定。

$('#errors').append("<p class="emailerror">Please enter a valid email</p>");

在追加之前，先移除那些带有"class = emailerror"的错误。

var email = $('#email').val();
email = validateEmail(email);
if (email = "false"){
    $('#errors .emailerror').remove();
    $('#errors').append("<p class="emailerror">Please enter a valid email</p>");
}

- Bhavesh G

Answer 3

尝试在追加新信息之前清除值，例如新错误:

$('#errors').val('');

- 4b0

---

我无法清除错误，因为可能存在其他表单元素的错误。 - kirby

Answer 4

使用html()或text()来设置错误div的内容：

$('#errors').html("<p>Please enter a valid email</p>");

如果想在email为true时不显示任何内容，可以在if语句中添加一个else：

if (email === "false"){
    $("#errors").html("<p>Please enter a valid email</p>");
} else {
    $("#errors").html("");
}

还要注意，我使用了 === 而不是 = 。这是因为使用单个等号（ = ）只会将变量 email 设置为 false ，而不实际检查相等性。

- Purag

---

我应该提到，这个div里面还有其他错误，所以使用 ".html" 可能会清除掉其他错误。 - kirby

所有的错误都会进入这个 div 中，以便用户可以在一个地方看到他们的表单错误。(这是一个注册页面) 这不是一个好主意吗？ - kirby

Answer 5

你需要做的是在你的条件语句后面添加一个$('.appended').remove()，然后在你要添加的文本中使用一个p标签并加上一个class="appended"，它可以正常工作。

- Olagoke Mills

Answer 6

更合适的方法是从DOM树中删除所有附加的代码：

试试这个：

var email = $('#email').val();
email = validateEmail(email);
if (email == "false"){
      $('#email_error').parent().remove();
      $('#errors').append("<p id='email_error'>Please enter a valid email</p>");
}

- Kushal Jayswal