使用Javascript在TextBox附近显示消息

Question

我有一个aspx表单，我需要使用jquery或javascript进行验证。

如果用户输入的值在该文本框中无效，我只想在文本框附近发送消息。为了在弹出窗口中显示消息[not alert（'message'）]

如何找到用户输入无效数据的文本框的位置，或者如何使用javascript或jquery在文本框附近显示消息？

我需要在blur中进行验证。因此，用户很容易知道在输入后是否立即输入了有效数据。

提前致谢。我对使用asp.net ajax验证及其标注扩展程序不感兴趣 我只是想实现一个类似于验证callout扩展器的功能。

Answer 1

将blur事件绑定到文本框时，您知道它是哪个文本框。只需使用你的回调javascript在附近插入错误。

如果你正在做jquery，它可能看起来像：

$('.my_textboxes').blur(function() {

var textbox = $(this);

//ajax validation call
$.post('/whereever', {}, function(response) {
    //ajax callback
    if (response == 'error') {
        textbox.next().html(error);   //something like this to insert the error into the next element after the texrbox, eg, a span to hold the error
    }
});`

Answer 2

您可以使用jQuery (ASP.NET) Validator Callout Plugin

Answer 3

您可以使用jQuery验证插件

• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js

其中包含指定控件旁边的消息或在一个位置指定所有消息的选项。

演示可在以下网站获得 http://docs.jquery.com/Plugins/validation

Answer 4

具体如何执行此操作取决于表单的布局，但通常您可能会执行以下操作：如果验证返回文本字段的错误，请检查是否已存在“错误框”那个领域。如果是这样，那么只需使用新的错误消息更新其内容;如果没有，则添加错误元素。

这样做的一种方法是使用具有特定类的<span>标记（用于布局目的），以及使用输入字段的“name”或“id”创建的“id”值：

$.fn.setValidationResult = function(errorMessage) {
  return this.each(function() {
    var errId = 'errMsg_' + this.name, errMsg = $('#' + errId);
    if (!errMsg.length) {
      $(this).after($('<span></span>', { class: 'validation-error', id: errId }));
      errMsg = $('#' + errId);
    }
    if (errorMessage)
      errMsg.html(errorMessage).show();
    else
      errMsg.html('').hide();
  });
});

然后你可以使用$(yourInput).setValidationResult(whatever);，当验证通过时，“what”为空。