To understand the problem, lets see what
.append
method does: The .append() method inserts the specified content as the last child of each element in the jQuery collection
(ref:
http://api.jquery.com/append/[
^])
So every time you blur out of your textbox, it appends the title text to the div (d2).
To overcome this, there are various solutions. I would recommend that instead of appending child to the div, you place a span element and set it's inner text to your validation message. Or you can also have pre-defined validation message and toggle the display/visibility of the span.
For ex - update your code to below and it shall work:
<div id="d2">
<asp:TextBox runat="server" ID="txtpwd2" title="Passwords do not match"></asp:TextBox>
<span id="errPwdNotMatching"></span>
</div>
$(document).ready(function () {
$('#txtpwd2').blur(function () {
debugger;
var t1 = $('#txtpwd1').val();
var t2 = $('#txtpwd2').val();
if (t1 != t2) {
$('#errPwdNotMatching').text($('#txtpwd2').attr('title'));
$('#txtpwd2').focus();
return false;
}
else {
$('#errPwdNotMatching').text('');
}
});
});
Do notice the else block I have added. It resets the error message if the passwords match.
Hope this helps!