Form field validation 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="Login" 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;
            $('#submit').click(function () {
                if ($('#username').val() == "") {
                    $('#username').css('box-shadow', '0 0 10px 2px red');
                    $('#username').next('.error').fadeIn('fast').text('Enter Username');
                    result = false;
                }
                if ($('#password').val() == "") {
                    $('#password').css('box-shadow', '0 0 10px 2px red');
                    $('#password').next('.error').fadeIn('fast').text('Enter password');
                    result = false;
                }
                return result;
            })
        });
    </script>

Thats all we have to do for the form field validation !