0

我有一个文本框，我需要在验证后将文本变成项目符号。我正在使用 jquery 验证插件来验证 onfocusout。验证文本框后，如果它有效，我需要将文本变成星号或项目符号（如密码文本框）。

我不能只将文本更改为 ' * '，因为我需要保留文本框的值，否则，当页面再次验证时，它会说它无效。

我不希望有 2 个不同的文本框被隐藏/显示，因为它在 IE 中闪烁并且看起来非常不专业，并且还存在验证问题。

我无法更改文本框的“类型”，因为 IE 不支持。

还有其他想法吗？我搜索了很多，但没有想出任何适合我的东西。谢谢！

这是我到目前为止的代码（遵循 Eric 的建议）：

我有一个文本框和一个隐藏字段：

<asp:TextBox ID="txtProvId" runat="server"></asp:TextBox>
<asp:HiddenField ID="hdfProvId" runat="server"></asp:HiddenField>

验证（在隐藏字段上）：

$("form").validate(
  {
      onfocusout: function (element) {
          jQuery(element).valid();
      },
      //error is placed in the textbox's tooltipster
      errorPlacement: function (error, element) {
          $(element).tooltipster('update', $(error).text());
          $(element).tooltipster('show');
      },

      //tooltipster is removed when validation is passed
      success: function (label, element) {
          $(element).tooltipster('hide');
      }
  });
 $('[id$="hdfProvId"]').each(function () {
    $(this).rules('add', {
        required: true,
        number: true,
        minlength: 7,
        maxlength: 7
    });
});

文本框上的 onFocusOut 事件：

$('[id$="txtProvId"]').bind("focusout", function (event) {
    $('[id$="hdfProvId"]').val($(this).val());
    alert($('[id$="hdfProvId"]').val());
    var isValid = $('[id$="hdfProvId"]').valid();
    if (isValid == true) {
        $(this).val('*******');
    }
});

所有这一切都很好，除了我不知道如何显示验证错误。我正在使用 jquery tooltipster 插件显示错误。它会在每个有错误的字段旁边显示一个工具提示。当验证在隐藏字段上时，不会显示任何工具提示。我需要它在文本框上显示工具提示。这是工具提示代码：

$('form input[type=text], input[type=password]').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'right'
});

显示它的代码在验证代码中。谢谢你的帮助。

4

1 回答 1

0

我添加了代码来为隐藏字段创建工具提示：

  $('form input[type=text], input[type=password], input[type=hidden]').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'right'
});

隐藏字段的工具提示显示在页面顶部，因此我将其更改为显示在前一个元素上：

 errorPlacement: function (error, element) {
          if ($(element).prop('type') == 'hidden') {
              $(element).prev().tooltipster('update', $(error).text());
              $(element).prev().tooltipster('show');
          }
          else {
              $(element).tooltipster('update', $(error).text());
              $(element).tooltipster('show');
          }
      },

      //tooltipster is removed when validation is passed
      success: function (label, element) {
          if ($(element).prop('type') == 'hidden') {
              $(element).prev().tooltipster('hide');
          }
          else {
              $(element).tooltipster('hide');
          }
      }

现在在所有作品中！

感谢大家帮助我指出正确的方向。

于 2013-07-29T18:48:57.750 回答