Error message in jquery

Question

0.00/5 (No votes)

See more:

Hi,

Please look into the code below, i want to display an error message using jquery, i have written code for that in jquery for confirm password. The problem is when blur() event occurs on txtpwd2 control, i am appending the error message. but when i create blur event multiple times, the error message is appending multiple times.

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.0.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#txtpwd2').blur(function () {
                debugger;
                var t1 = $('#txtpwd1').val();
                var t2 = $('#txtpwd2').val();
                if (t1 != t2) {
                    $('#d2').append($('#txtpwd2').attr('title'));
                    $('#txtpwd2').focus();
                    return false;
                }

            });

        });

    </script>
</head>
<body>
    <form id="form1" runat="server">

    <div>
        <div id="d1">
            <asp:TextBox runat="server" ID="txtpwd1"></asp:TextBox>
        </div>
        <div id="d2">
            <asp:TextBox runat="server" ID="txtpwd2" title="Passwords do not match"></asp:TextBox>
        </div>
        <div id="d3">
            <asp:Button runat="server" ID="btn" Text="submit" />
        </div>
    </div>
    </form>
</body>
</html>

Posted 26-Jun-13 19:03pm

Rockstar_

Add a Solution

Comments

Mohammed Hameed 27-Jun-13 1:07am

Might be you need to catch some other event but not blur...

Rockstar_ 27-Jun-13 1:13am

blur event is working fine, i need solution for appending the title of txtpwd2 multiple times tothe div d2.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ankur^\m/ · Accepted Answer · 2013-06-26T21:07:00

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:

XML

<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!

Nick Fisher (Consultant) · Accepted Answer · 2013-06-26T22:50:00

Solution 3

Yes, Ankur is right. If it were me, it would go the method of having a hidden div containing the message you want to display, and then just show it with the '.show()' command. But if you insist on going the 'append' route, then another easy solution would be to use JQuery's 'remove' command to remove any existing elements just before you do the append - that way, you know for sure there can only be one message being appended to the div. More on 'remove' :
http://api.jquery.com/remove/[^]

Posted 26-Jun-13 22:50pm

Nick Fisher (Consultant)

Updated 26-Jun-13 22:53pm

v3

Comments

Ankur^\m/ 28-Jun-13 2:14am

div has a block display and it would display in a new line rather than in the same line.
And about using remove, he needs to be careful because just using remove for d2, will remove textbox as well. He will first have to select the element next to the textbox and as it does not have any id or class he will have to carefully write his selector code.