Question

我有一个与jquery有关的问题。基本上我想做一件非常简单的事情。我有一个文本输入字段。提交时，如果字段为空，我想显示错误消息。我这样做了：

errMsg = "Please write name";               
$("div#errMsg").css("background-color", "red");
 $("div#errMsg").html(errMsg);

并在HTML中：

<div id="errMsg"></div>
<strong>Name:  </strong>
<input name="name" id="name" type="text" maxlength="255" size="50" />

它工作正常，但有问题。当我将该字段留空并显示错误消息时，如果不刷新页面，错误消息就不会消失。我正在尝试这样做，以便当有错误消息，并在字段中键入内容时，它会自动删除错误而不刷新页面。

Answer 1

您通过返回false来阻止提交。例如。

if($('#name').val().trim() == "")
{
    Alert('Please write name');
    return false;
}

Answer 2

在输入文本框中，您需要检测文本的更改：

$("#name").onChange( function(event){ //Re-evaluate to see if error should be displayed} );

Answer 3

查看jquery how to detect a textboxs content has changed。

Answer 4

您可以在页面首次加载到#name元素的change event时附加处理程序，如下所示：

$("#name").change(function() {
  //with .toggle(bool) we're only showing the element if the value's empty
  $("#errMsg").toggle(this.value == "").html("Please write name");
}).change(); //call it initially, in case we started invalid

这还涉及为样式提供<div> CSS，这更容易维护：

#errMsg { background-color: red; } /*could also use a class and apply that here*/

在你的submit()处理程序中没有必要（除非你以编程方式更改值），但如果你觉得需要再次运行检查，只需调用.change()再次执行处理程序，就像这样：

$("#name").change();

jquery验证问题

4 个答案: