SO - 21224337

by Arun P Johny

HTML

<script src="http://f787560ba70f1b179169-a50fb1398a876e5fb3dcb373780ed776.r22.cf2.rackcdn.com/lib/jquery.validate.min.js"></script>
<form class="form-horizontal" role="form" name="submitDetails" action="discovery_2014.do" method="POST" id="submitDetails">
    <div class=" column leftside">
        <div class="firstName col-sm-12">
            <div class="col-sm-10 form-group">
                <label for="firstName" class="sr-only">First name</label>
                <input type="text" class="form-control" name="firstName" placeholder="First name" />
            </div>
            <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> 
            </div>
        </div>
        <div class="lastName col-sm-12">
            <div class="col-sm-10 form-group">
                <label for="lastName" class="sr-only">Last name</label>
                <input type="text" class="form-control" name="lastName" placeholder="Last name" />
            </div>
            <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> 
            </div>
            <!-- <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> </div> --></div>
        <div class="age-state clearfix">
            <div class="age col-sm-6">
                <div class="col-sm-9 form-group">
                    <label for="custom1" class="sr-only">Age</label>
                    <input type="text" class="form-control" name="custom1" placeholder="Age" />
                </div>
                <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> 
                </div>
                <!-- <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> </div> --></div>
            <div class="state col-sm-6">
                <div class="col-sm-11 form-group">
                    <label class="col-sm-12 control-label sr-only" for="selectbasic state">Location</label>
                    <div class="col-sm-12">
            ...

JavaScript

$(document).ready(function () {
    <!-- validation -->
    $('#submitDetails').validate({
        // 1. validation rules.
        rules: {
            firstName: {
                required: true,
                maxlength: 120
            },
            lastName: {
                required: true,
                maxlength: 120
            },
            custom1: {
                required: true,
                maxlength: 120
            },
            state: {
                required: true
            },
            custom9: {
                required: true
            },
            email: {
                required: true,
                email: true
            }
        },
        // 2. Validation fail messages
        messages: {
            custom9: {
                required: "You must agree to the terms of conditions in order to participate."
            }
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") == "custom9") error.appendTo("#error_msg");
            else error.insertAfter(element);
        }
    });
    ///execute when submit button is clicked
    $("#submit").click(function () {

    });
});