How to clear/remove values from onblur event after the tab is changed

My problem is that in my registration form when it has error message and the user tries to changed tab and back again to registration the error message are still there what should I do to be able to remove the error message when I changed the tabs and when I click again the registration link?

<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
    <script>
        $(function() {           
            var tabContainers = $('section.tabs > article');
            tabContainers.hide().filter('#login').show();

            $('.ultabs a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('.ultabs a').removeClass('selected');
                $(this).addClass('selected');
                return false;
            });
        });
        function check_email() {
            var email=$("#textEmail").val();
            $.ajax(
            {
                type:"POST",
                url:"register.php",
                data: { 
                'email': email
                },
                success:function(msg) {
                    $("#checkEmail").html(msg);
                }
            });
            return false;
        }
        function check_password() {
            var pass=$("#textPassword").val();
            $.ajax(
            {
                type:"POST",
                url:"register.php",
                data: { 
                'pass': pass
                },
                success:function(msg) {
                    $("#checkPassword").html(msg);
                }
            });
            return false;
        }
    </script>

<nav id="siteNav">
    <h1>Navigation</h1>
    <ul class="ultabs">
        <li><a href="#login">Login</a></li>
        <li><a href="#register">Register</a></li>
    </ul>
</nav>
<section id="siteContent" class="tabs">
    <h1>Section</h1>
    <article id="login">
        <h1>Login</h1>
        <table>
            <tr>
                <td class="message" colspan="2"></td>
            </tr>
            <tr>
                <td>E-mail:</td><td><input type="email"></td>
            </tr>
            <tr>
                <td class="message" colspan="2"></td>
            </tr>
            <tr>
                <td>Password:</td><td><input type="password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button"></td>
            </tr>
        </table>
    </article>
    <article id="register">
        <h1>Register</h1>
        <table>
            <tr>
                <td class="message" colspan="2"></td>
            </tr>   
            <tr>
                <td>Name:</td><td><input type="text"></td>
            </tr>
            <tr>
                <td id="checkEmail" class="message" colspan="2"></td>
            </tr>
            <tr>
                <td>E-mail:</td><td><input id="textEmail" type="email" onblur="return check_email()"></td>
            </tr>
            <tr>
                <td id="checkPassword" class="message" colspan="2"></td>
            </tr>
            <tr>
                <td>Password:</td><td><input id="textPassword" type="password" onblur="return check_password()"></td>
            </tr>
            <tr>
                <td class="message" colspan="2"></td>
            </tr>
            <tr>
                <td>Re-type:</td><td><input type="password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button"></td>
            </tr>
        </table>
    </article>
</section>

Answers


You can clear the td on change of the tab

$('.ultabs a').click(function () {
   $('.message').html('');
   // the rest of your code
});

I would suggest you use a validator plugin like the one provided by Bassistance - http://bassistance.de/jquery-plugins/jquery-plugin-validation/ . It will handle the error messages without you getting into the nitty gritty of validation....


Need Your Help

Is there a difference between ++i and i++ in this loop?

javascript loops jslint post-increment pre-increment

I found this array.prototype.reduce function at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Python - Combining two json objects

python json

I am trying to follow the answer(s) in the question shown here, but I'm still having some trouble combining my two json objects.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.