hide div when typing in a input field starts - jQuery

Question

I have a form that looks like this

        <form id="form-send">
            <table class="form-table">
                <tbody>
                    <tr>
                        <td width="30%">First Name <span class="required">*</span></td>
                        <td width="70%">
                            <input type="text" id="first-name" value="" />
                            <div id="first-name-error-msg" class="error-box"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Last Name<span class="required">*</span></td>
                        <td>
                            <input type="text" id="last-name" value="" />
                            <div id="last-name-error-msg" class="error-box"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td><input type="text" value="" /></td>
                    </tr>
                    <tr>
                        <td><button type="submit">Send</button></td>
                        <td><button type="reset">Reset</button></td>
                    </tr>
                </tbody>
            </table>
        </form>

The script I use to validate the form inputs looks like this

        $(document).ready(function($) {
            $('#form-send').submit(function (){
                var error = 0;
                var name = $('#first-name').val();
                if (name == '') {
                    error = 1;
                    $('#first-name').addClass('error');
                    $('#first-name-error-msg').html(" - First name is required");
                    $('#first-name-error-msg').parent().show();
                }
                var name = $('#last-name').val();
                if (name == '') {
                    error = 1;
                    $('#last-name').addClass('error');
                    $('#last-name-error-msg').html(" - Last name is required");
                    $('#last-name-error-msg').parent().show();
                }
    if (error) {
        return false;
    } else {
        return alert("Email sent");
    }
            });
        });

If I press the submit button without filling the fields the error messages are displayed. What I am trying to do is: after the display of the error messages when the user starts to type again into the input field, the error message, the div that contains the message, should disappear. I have tried something like this

$('.error').keyup(function() {
    $('.error-box').hide('slow');
});

but it won't work, can someone give me some hints on what am I doing wrong or what other method should I use ?

Rohan Kumar · Accepted Answer · 2013-10-15 11:51:13Z

2

Use on() for dynamically attached classes like

$(document).on('keyup','.error',function() {
    $(this).next('.error-box').hide('slow');
});

Working Demo

Also you can simplify your code by using class like,

$('#form-send').submit(function () {
    var error = 0;
    var status=true;
    $('input.required-input').each(function(){
        $this=$(this);
        if(!$.trim($this.val()))
        {
            $this.addClass('error');
            $this.next('.error-box').html($this.attr('title')).show();
            status=false;
        }
        else
        {
            $this.removeClass('error');   
            $this.next('.error-box').html('').hide();
        }
    })
    return status;
});

Updated Demo

edited Oct 15, 2013 at 11:51

answered Oct 15, 2013 at 11:37

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

hide div when typing in a input field starts - jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related