显示星号或符号，而不是在聚焦jquery上显示文本。

Question

我有一个文本框，其中我需要文本成为子弹后，其验证。我正在使用jquery验证插件来验证onfocusout。在textbox被验证之后，如果它是有效的，我需要文本变成星号或符号(就像密码文本框)。

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

我不想有两个不同的文本框是隐藏/显示，因为它在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工具提示插件显示错误。它在每个字段旁边显示一个带有错误的工具提示。当验证在隐藏字段上时，没有显示工具提示。我需要它在文本框上显示工具提示。下面是工具提示代码：

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

要显示它的代码在验证代码中位于上面。谢谢你的帮助。

Answer 1

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

  $('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');
          }
      }

现在一切都在进行中！

谢谢你们帮助我朝着正确的方向前进。