Validation.js is useful when performing client side validtions. Other than this jquery plugin, there is another one named jquery.validate.js comes in-built with the ASP.NET Web Project template.

Source Code

@model TestApp.Models.LoginModel

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>  
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>

<script>  
$(document).ready(function () {  
    $("#loginForm").validate();  
});  
</script>

<form id="loginForm">  
    <fieldset>  
    <ol>  
        <li>  
            @Html.LabelFor(m => m.UserName)  
            @Html.TextBoxFor(m => m.UserName, new { @class="required"})  
        </li>  
        <li>  
            @Html.LabelFor(m => m.Password)  
            @Html.PasswordFor(m => m.Password, new { @class = "required" })  
        </li>  
    </ol>

    <input type="submit" value="Submit"/>

    </fieldset>  
</form>

Below after few screenshots I have taken before and after the form submit.

Before

enter image description here

After hitting the submit button

enter image description here

Lets play around lil more with this, there are many other options that come with jquery.validate.js, that you should check out.

Source Code

@model TestApp.Models.LoginModel

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>  
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>

<script>  
$(document).ready(function () {  
    $("#registerForm").validate({    
        messages: {  
            UserName: {  
                required: "Eh ? empty username ?",  
                minLength: "At least 4 characters are necessary"  
            },  
            Password: {  
                required: "password missing"  
            },  
            Email: {  
                required: "please provide us your email, we promise we wont spam !",  
                email: "email id is not in correct format, eg: mail@yassershaikh.com"  
            }  
        }  
    });  
});  
</script>

<form id="registerForm">  
    <fieldset>  
    <ol>  
        <li>  
            @Html.LabelFor(m => m.UserName)  
            @Html.TextBoxFor(m => m.UserName, new { @class = "required", minLength = "4"})  
        </li>  
        <li>  
            @Html.LabelFor(m => m.Password)  
            @Html.PasswordFor(m => m.Password, new { @class = "required", minLength = "4" })  
        </li>  
        <li>  
            @Html.LabelFor(m => m.Email)  
            @Html.TextBoxFor(m => m.Email, new { @class = "required email" })  
        </li>  
    </ol>

    <input id="submitBtn" type="submit" value="Submit"/>

    </fieldset>  
</form>

Screengrab

enter image description here

There are loads of built-in Validation methods, check em out at docs.jquery.com/Plugins/Validation

Hope this helped you.

Happy Coding !

Further Reading