0

我有一个看起来像这样的表格

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

我用来验证表单输入的脚本如下所示

        $(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");
    }
            });
        });

如果我在未填写字段的情况下按下提交按钮，则会显示错误消息。我想要做的是：当用户再次开始在输入字段中输入时显示错误消息后，错误消息（包含该消息的 div）应该消失。我尝试过这样的事情

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

但它不起作用，有人可以给我一些提示，告诉我我做错了什么或我应该使用什么其他方法？

4

1 回答 1

2

使用on()表示dynamically attached classes喜欢

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

工作演示

你也可以通过使用类来简化你的，code

$('#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;
});

更新的演示

于 2013-10-15T11:37:29.300 回答