How to validate textbox for minimum length in jQuery

First create an html form :

    <div id="login">

        <p class="header">Login Form</p>

            <p>  <input type="text" id="username" class="text" /><span class="error"></span>

            </p>

            <p> <input type="password" id="password" class="text" /><span class="error"></span></p>

            <p> <input type="button" id="submit" value="Register" class="btn" /></p>

        </div>

Now we have to create some css for the form:

     <style type="text/css">

            #login {

               width:40%;

               height:300px;

               margin:80px auto;

               background-color:rgba(111, 67, 150,0.4);

               border-radius:10px;

            }

                #login p.header {

                    width:100%;

                    padding:7px 0;

                    text-align:center;

                    background-color:rgb(159, 30, 82);

                    font-size:36px;

                    font-family:BlackCasper;

                    color:white;

                    border-top:5px solid rgb(111, 48, 137) ;

                    border-bottom:5px solid rgb(111, 48, 137) ;

                }

                #login p {

                    width:100%;

               

                    text-align:center;

                    padding:5px 0;

                }

                    #login p .text {

                        width:50%;

                        height:30px;

                      

                    }

                    #login p .error {

                        border:1px solid rgb(194, 80, 80);

                        background-color:rgba(111, 67, 150,0.4);

                        text-align:right;

                        font-size:24px;

                        display:none;

                    }

                    #login p .btn {

                        width: 50%;

                        height: 30px;

                        background-color: rgb(134, 128, 189);

                        color: whitesmoke;

                    }

        </style>

Finally the validation part for the fields :

Insert the below given code into head section

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var result = true;
          $('#password').keyup(function () {
                if ($('#password').val().length < 4) {
                    $('#password').css('box-shadow', '0 0 10px 2px red');
                    $('#password').next('.error').fadeIn('fast').text('minimum 4 characters');
                    result = false;
                } else {
                    $('#password').css('box-shadow', '0 0 10px 2px green');
                    $('#password').next('.error').fadeOut();
                }
            })
        });
    </script>

Password length set on minimum 4 characters.
That's all the code save and run !