Question

我有一个文本框，我需要文本在验证后成为项目符号。我正在使用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'
});

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

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

现在所有的作品！

感谢所有人帮助我指出正确的方向。

在焦点上显示星号或项目符号而不是文本 - jquery

1 个答案: