jquery ajax 表单验证

Question

我有一个表单，我首先进行验证，然后通过 ajax 提交它，其中检查了一些字段，例如数据库中可能已经存在的用户名。我想在有问题的元素之后显示这些错误条件中的任何一个。表单元素如下所示：

  <span class="inputRow">
    <span class="formLabel">
        <label for="user_name">User Name</label>
    </span>
    <span class="formInput">
        <input id="user_name" name="user_name" class="inputText required" title="User Name" tabindex="3" type="text" value="<?= $user_name ?>" >
        <span class="formError"><span id="user_msg"></span></span>
    </span>
  </span>

我有一个像这样的典型验证/错误放置代码：

  errorPlacement: function(error, element) 
  {
    if (element.attr("name") == "user_name" )
        error.insertBefore("#user_msg");
    else
        error.insertAfter(element);
  },
});

要提交表单，我有一个如下所示的提交处理程序：

submitHandler: function(form) {

  $.ajax({
    type:'POST', 
    url: 'add_user.php', 
    data:$('#reg_form').serialize(), 
    success: function(response) {
      if (response.status == "error") {
        if (!response.hasOwnProperty('user_name'))
          $("#user_msg").text("");
        else if (response.user_name.length > 0)
          $("#user_msg").text(response.user_name);
      }
    }
  });
},

返回的响应是一个 JSON 数组，我可以很好地得到错误消息。当我第一次提交表单时，这一切都很好。如果我有重复的用户名，则显示正确，或者如果没有输入用户名，则显示也正确。当我提交表单并收到有关文件中重复用户名的回复时，问题就出现了。然后，如果我清除 user_name 字段并尝试再次提交表单，重复的用户名消息将保留在那里，并且还会显示说需要用户名的消息。

对我来说，它们的显示方式似乎存在冲突，因为 errorPlacement 函数使用 error.insertBefore("#user_msg")，但 ajax 函数的返回使用 $("#user_msg").text( ）。所以 insertBefore() 不会删除之前的 text() 值，但我还没有找到任何其他方式来显示来自 errorPlacement 的文本。我们可以从错误对象中获取文本值吗？如果是这样，怎么做？或者有没有更好的方法让这两者以同样的方式工作？

Answer 1

我不明白你到底是什么问题。

如果您在发生错误时无法显示这样的错误并且您修复了它，错误仍然存​​在，这是因为您根本没有清空错误放置。 在您发送新请求之前，解决方案就在这里，让您的错误位置为空。

您可以使用 jquery Dialog 以替代方法显示错误。

Answer 2

引用：“我们可以从错误对象中获取文本值吗？如果可以，如何？”

您可以通过以下方式从error 对象中获取文本：

error.text()

根据你的使用方式，你可能需要这样格式化：

$(error).text()