错误的验证码

Question

我正在尝试使用bootstrap和jquery在Web端进行验证的简单表单。 不幸的是出了点问题，我无法弄清楚是什么。 这是我的HTML代码。

<!-- FORMS-->
<div class='container'>
    <form role='form' class='form-horizontal'>
        <div class='form-group has-feedback'>
            <label for='email' class='control-label col-md-3'>Email:
            </label>
            <div class='col-md-6'>
                <input type='email' class='form-control' name='email' id='email' placeholder='email'/>
                <span class='glyphicon form-control-feedback'></span>
            </div>
        </div>

        <div class='form-group has-feedback'>
            <label for='twitter' class='control-label col-md-3'>Twitter:
            </label>
            <div class='col-md-6'>
                <div class='input-group'>
                    <span class='input-group-addon'>@</span>
                    <input type='text' class='form-control' name='twitter' id='twitter' placeholder='twitter'/>
                    <span class='glyphicon form-control-feedback'></span>
                </div>
            </div>
        </div>

        <div class='form-group has-feedback'>
            <label for='name' class='control-label col-md-3'>Name:
            </label>
            <div class='col-md-6'>
                <input type='text' class='form-control' name='name' id='name' placeholder='name'/>
                <span class='glyphicon form-control-feedback'></span>
            </div>
        </div>

        <div class='form-group has-feedback'>
            <label for='phone' class='control-label col-md-3'>Phone:
            </label>
            <div class='col-md-6'>
                <input type='phone' class='form-control' name='phone' id='phone' placeholder='phone'/>
                <span class='glyphicon form-control-feedback'></span>
            </div>
        </div>
            <div class='form-group'>
            <button type='button' class='btn btn-success col-xs-4 col-xs-offset-4' id='send'>
                Send
            </button>
        </div>
    </form>
</div>

和jquery验证码：

<!-- Validation -->
<script>
    $(function(){
        $('#send').click(function(){
            var formValid = true;

            $('input').each(function(){
                var formGroup = $(this).parents('.form-group');
                var glyphicon = formGroup.find('.glyphicon');

                if(this.checkValidity())
                {
                    formGroup.addClass('has-success').removeClass('has-error');
                    glyphicon.addClass('glyphicon-ok').removeClass('glyphicon-remove')
                }
                else
                {
                    formGroup.addClass('has-error').removeClass('has-success');
                    glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok')  
                    formValid = false;              
                }
            });
            if (formValid) 
            {
                $('#success-alert').removeClass('hidden')
            }
        });
    });
</script>

..................... .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ............