Form validation messages not showing

Question

I am developing a registration form for a project I am working on. The project uses Bootstrap and jQuery to control form validation and I am using the validate plugin. This is setup in an ASP.NET MVC 4 Web application using C#. I have all my bundles and routing properly configured, but am having no luck with getting messages to display on the form.

Here is the form:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
    <div class="form-group">
        <label for="textFirstName" class="control-label col-xs-4">First name</label>
        <div class="col-xs-8">
            <input type="text" name="textFirstName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textLastName" class="control-label col-xs-4">Last name</label>
        <div class="col-xs-8">
            <input type="text" name="textLastName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail" class="control-label col-xs-4">Email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW1" class="control-label col-xs-4">Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <div class="btn-group col-xs-offset-4 col-xs-10">
            <button type="reset" class="btn btn-info">Clear</button>
            <button type="submit" class="btn btn-info">Submit</button>
        </div>
    </div>

</form>

Here is the JavaScript:

    $(document).ready(function () {
    $('#formRegister').validate({
        rules: {
            textFirstName: {
                required: true,
                minlength: 1,
                maxlength: 50
            },
            textLastName: {
                required: false,
                maxlength: 50
            },
            textEmail: {
                required: true,
                email: true
            },
            textEmail2: {
                required: true,
                email: true,
                equalTo: '#textEmail'
            },
            passwordPW1: {
                required: true,
                minlength: 4
            },
            passwordPW2: {
                required: true,
                equalTo: '#passwordPW1'
            }
        },
        messages: {
            textFirstName: "The first name must be from 1 to 50 characters in length",
            textLastName: "The last name must be from 0 to 50 characters in length",
            textEmail: "Please enter a valid email address",
            textEmail2: "Emails do not match",
            passwordPW1: "The password must be from 4 to 50 characters in length",
            passwordPW2: "Passwords do not match"
        },
        highlight: function(element){
            $(element).closest('.form-control').removeClass('success').addClass('error');
        },
        success: function(element){
            element.text('OK!').addClass('valid')
            .closest('.form-control').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

Answer 1

You need to add a messages container so the messages can be shown somewhere. Add:

container: '#messages',

on your js function just before the feedbackIcons and

                <div class="form-group">
                        <div id="messages"></div>
                </div>

Answer 2

Properties like messages, highlight are not sub properties of rules

jQuery(function ($) {
    $('#formRegister').validate({
        rules: {
            textFirstName: {
                required: true,
                minlength: 1,
                maxlength: 50
            },
            textLastName: {
                required: false,
                maxlength: 50
            },
            textEmail: {
                required: true,
                email: true
            },
            textEmail2: {
                required: true,
                email: true,
                equalTo: '#textEmail'
            },
            passwordPW1: {
                required: true,
                minlength: 4
            },
            passwordPW2: {
                required: true,
                equalTo: '#passwordPW1'
            }
        },
        messages: {
            textFirstName: "The first name must be from 1 to 50 characters in length",
            textLastName: "The last name must be from 0 to 50 characters in length",
            textEmail: "Please enter a valid email address",
            textEmail2: "Emails do not match",
            passwordPW1: "The password must be from 4 to 50 characters in length",
            passwordPW2: "Passwords do not match"
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
            .closest('.form-group').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>


<h2>Registration Form</h2>
<form id="formRegister" class="form-horizontal col-xs-3">
    <div class="form-group">
        <label for="textFirstName" class="control-label col-xs-4">First name</label>
        <div class="col-xs-8">
            <input type="text" name="textFirstName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textLastName" class="control-label col-xs-4">Last name</label>
        <div class="col-xs-8">
            <input type="text" name="textLastName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail" class="control-label col-xs-4">Email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="textEmail2" class="control-label col-xs-4">Reenter email</label>
        <div class="col-xs-8">
            <input type="text" name="textEmail2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW1" class="control-label col-xs-4">Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="passwordPW2" class="control-label col-xs-4">Reenter Password</label>
        <div class="col-xs-8">
            <input type="password" name="passwordPW2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <div class="btn-group col-xs-offset-4 col-xs-10">
            <button type="reset" class="btn btn-info">Clear</button>
            <button type="submit" class="btn btn-info">Submit</button>
        </div>
    </div>
    
</form>