jquery validation

http://themeforest.net/item/realia-retina-responsive-real-estate-template/4594492

I purchased above template and now I want to make the jquery validation checking just like client validation check like the field is empty ... and etc.

 

And the <head> content is here

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
    <link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css" type="text/css">
    <link rel="stylesheet" href="assets/libraries/chosen/chosen.css" type="text/css">
    <link rel="stylesheet" href="assets/libraries/bootstrap-fileupload/bootstrap-fileupload.css" type="text/css">
    <link rel="stylesheet" href="assets/libraries/jquery-ui-1.10.2.custom/css/ui-lightness/jquery-ui-1.10.2.custom.min.css" type="text/css">
    <link rel="stylesheet" href="assets/css/realia-blue.css" type="text/css" id="color-variant-default">
    <link rel="stylesheet" href="#" type="text/css" id="color-variant">

End Head

Below is one of the generic form inside of the content.

<div class="content">
        <div class="row">
            <div class="span8">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper libero sed ante auctor vel gravida nunc placerat. Suspendisse molestie posuere sem, in viverra dolor venenatis sit amet. Aliquam gravida nibh quis justo pulvinar luctus. Phasellus a malesuada massa.
                </p>
            </div><!-- /.span8 -->
        </div><!-- /.row -->
        <form method="post" action="/bondquotestep" enctype="multipart/form-data">
            <div class="row">
                <div class="span4">
                    <h3><strong>1.</strong> <span>Indemnitor info</span></h3>

                    <div class="control-group">
                        <label class="control-label" for="inputIndemnitorFirstName">
                            First name
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorFirstName" name="inputIndemnitorFirstName" />
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bedrooms control-group">
                        <label class="control-label" for="inputIndemnitorLastName">
                            Last Name
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorLastName" name="inputIndemnitorLastName">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bathrooms control-group">
                        <label class="control-label" for="inputIndemnitorMiddleName">
                            Middle Name                            
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorMiddleName" name="inputIndemnitorMiddleName">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bedrooms control-group">
                        <label class="control-label" for="inputIndemnitorSSN">
                            SSN
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorSSN" name="inputIndemnitorSSN">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bathrooms control-group">
                        <label class="control-label" for="inputIndemnitorDOB">
                            DOB
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorDOB" name="inputIndemnitorDOB">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="control-group">
                        <label class="control-label" for="inputIndemnitorStreetName">
                            Street No/Name
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorStreetName" name="inputIndemnitorStreetName">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="control-group">
                        <label class="control-label" for="inputIndemnitorCity">
                            City
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorCity" name="inputIndemnitorCity">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bedrooms control-group">
                        <label class="control-label" for="inputIndemnitorState">
                            State
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorState" name="inputIndemnitorState">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bathrooms control-group">
                        <label class="control-label" for="inputIndemnitorZip">
                           Zip
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorZip" name="inputIndemnitorZip">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->
                   
                    <div class="control-group">
                        <label class="control-label" for="inputIndemnitorEmail">
                            Email                            
                        </label>
                        <div class="controls">
                            <input type="text" id="inputIndemnitorEmail" name="inputIndemnitorEmail">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->                    
                </div><!-- /.span4 -->
                <div class="span4">
                    <h3><strong>2.</strong> <span>Principal info</span></h3>

                    <div class="control-group">
                        <label class="control-label" for="inputPrincipalName">
                            Principal Name (Name on the Bond Form)
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPropertyLocation">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->
                                       
                    <div class="bedrooms control-group">
                        <label class="control-label" for="inputPrincipalDBA">
                            DBA(Doing Business As)
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalDBA">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bathrooms control-group">
                        <label class="control-label" for="inputPrincipalBusinessType">
                            Business Type
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalBusinessType" name="inputPrincipalBusinessType">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="area control-group">
                        <label class="control-label" for="inputPrincipalLicenseNumber">
                            License Number
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalLicenseNumber" name="inputPrincipalLicenseNumber">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="price control-group">
                        <label class="control-label" for="inputPrincipalMarriageStatus">
                            Marriage Status
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalMarriageStatus" name="inputPrincipalMarriageStatus">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->
                 
                    <div class="control-group">
                        <label class="control-label" for="inputPrincipalStreetName">
                            Street No/Name
                            <span class="form-required" title="This field is required.">*</span>
                             
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalStreetName" name="inputPrincipalStreetName">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="control-group">
                        <label class="control-label" for="inputPrincipalCity">
                            City
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalCity" name="inputPrincipalCity">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bedrooms control-group">
                        <label class="control-label" for="inputPrincipalState">
                            State
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalState" name="inputPrincipalState">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="bathrooms control-group">
                        <label class="control-label" for="inputPrincipalZip">
                           Zip
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalZip" name="inputPrincipalZip">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->
                   
                    <div class="area control-group">
                        <label class="control-label" for="inputPrincipalPhoneNumber">
                            Phone Number
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalPhoneNumber" name="inputPrincipalPhoneNumber">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                    <div class="price control-group">
                        <label class="control-label" for="inputPrincipalFaxNumber">
                            Fax Number
                            <span class="form-required" title="This field is required.">*</span>
                        </label>
                        <div class="controls">
                            <input type="text" id="inputPrincipalFaxNumber" name="inputPrincipalFaxNumber">
                        </div><!-- /.controls -->
                    </div><!-- /.control-group -->

                </div><!-- /.span4 -->
    @if (additionalInformationFlag == "Notary Bond" && inputState == "CA")
    {
       
       @Html.Partial("./ControlsAdditionalBondInfo/CommissionDate")
    }
    else
    {
       @Html.Partial("GenericObligee")
    }

     <div class="span4">
                    <br />
                    <input type="submit" class="btn btn-primary arrow-right" value="Quote Now" />
     </div>
            </div><!-- /.row -->
        </form>
    </div><!-- /.content -->
solution1368Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

solution1368Author Commented:
Just FYI, I already merge the template to MVC 3 so under script folder.
I do have jquery validate.js in place
0
Alexandre SimõesManager / Technology SpecialistCommented:
This is my favorite client-side validation tool:
http://bassistance.de/2013/03/22/release-validation-plugin-1-11-1/

Have a look at the documentation, is pretty straight forward.
Basically you just need to add specific classes to the elements you want to validate.
0
apeterCommented:
Please place your jquery script below the content and try to run the validation.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.