Show asterisks or bullets instead of text on focusout - jquery - jquery-validate

Question

I have a textbox where I need the text to become bullets after its validated. I am using jquery validation plugin to validate onfocusout. After the textbox is validated, if it is valid, I need the text to become asterisks or bullets (like a password textbox).
I can't just change the text to '*' because I need to keep the value of the textbox because otherwise, when the page validates again, it says it is invalid.
I don't want to have 2 different textboxes that are hidden/shown because it flashes in IE and looks very unprofessional and it also presents validation issues.
I can't change the 'type' of the textbox because that is not supported in IE.
Any other ideas? I searched a lot but have not come up with anything that works for me. Thanks!
Here is the code I have so far (following Eric's suggestion):
I have a textbox and a hidden field:
<asp:TextBox ID="txtProvId" runat="server"></asp:TextBox>
<asp:HiddenField ID="hdfProvId" runat="server"></asp:HiddenField>
The validation (on the hidden field):
$("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 event on the textbox:
$('[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('*******');
}
});
All this works great except that I don't know how to get the validation error to display. I am displaying the errors using jquery tooltipster plugin. It displays a tooltip next to each field with an error. When the validation is on the hidden field, no tooltip displays. I need it to display the tooltip on the textbox. Here is the tooltip code:
$('form input[type=text], input[type=password]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
The code to display it is above in the valiation code. Thanks for your help.

Answer 1

I added code to create a tooltip for hidden fields:
$('form input[type=text], input[type=password], input[type=hidden]').tooltipster({
trigger: 'custom',
onlyOne: false,
position: 'right'
});
The hidden field's tooltip was showing at the top of the page so I changed it to show on the previous element:
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');
}
}
And now in all works!
Thanks all for you help in pointing me in the right direction.