Validity and error messages from jquery validator

Question

I have built a signup page for the potential users. For the signup form i am using jquery validation for the validity fields. When a field is not valid the error messages appear.

I tried to put the input areas inside a table and what i noticed is that the error message is appearing right next to the input field (not in the next cell for example).

I need to know if there is a way to control where the error message will appear.

Apart from that, i would like to know if there is a way to show validity messages. For example if a field is set, show a validation image, or if the the passwords match show a message like "Passwords match".

If possible i would like some code examples unless it's really easy. I am quite new to this though, so detailed help would help me much. Thanks in advance!

Here is my part of my code

validate.js:

jQuery.validator.addMethod('usernameCheck', function (value) {

    var isSuccess = false;

    $.ajax({url: "check",
        type: "post",
        data: "name=" + value,
        async: false,
        success:
                function (msg) {
                    if ((msg.toString()) === "true") {
                        isSuccess = true;
                    }
                    if (isSuccess) {
        $("#nameInfo").html("true");
    }
                }
    });
    return isSuccess;
}, "");



$(document).ready(function () {


    //Validation rules for form
    $("#contact_form").validate({
        // Specify the validation rules

        rules: {
            username: {
                required: true,
                usernameCheck: true
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm: {
                required: true,
                equalTo: "#pass"
            },
            email: {
                required: true,
                email: true
            }
        },
        // Specify the validation error messages
        messages: {
            name: {
                required: "Please enter your name!!Please!!!",
                usernameCheck: "Username in use!"
            },
            pass: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm: {
                equalTo: "Passwords are not matching"
            },
            email: "Please enter a valid email address"
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

Singup form:

        <div id="container">
            <h2>User Registration</h2>
            <form action="welcome.xhtml" method="post" id="contact_form">
                <table border="1">
                    <tbody>
                        <tr>
                            <td><label>Username: </label></td>
                            <td><input id="username" type="text" name="username" size="24" placeholder="4-24 characters" maxlength="24"/></td>
                            <td><label for="username"></label></td>
                        </tr>
                    </tbody>
                </table>

<!--                <div>
                    <label>Username: </label>
                    <input id="username" type="text" name="username" size="24" placeholder="4-24 characters" maxlength="24"/>
                </div>-->

                <div>
                    <label>Password: </label>
                    <input id="password" type="password" name="password" size="24" placeholder="8-24 characters" maxlength="24"/>
                </div>

                <div>
                    <label>Confirm Password: </label>
                    <input id="confirm" type="password" name="confirm" size="24" placeholder="8-24 characters" maxlength="24"/>
                </div>

                <div>
                    <label>Name: </label>
                    <input id="name" type="text" name="name" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Surname</label>
                    <input id="surname" type="text" name="surname" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Email: </label>
                    <input id="email" type="text" name="email" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Phone Number: </label>
                    <input id="phoneNumber" type="text" name="phoneNumber" size="24"  maxlength="128"/>
                </div>

                <div >
                    <label>Address: </label>
                    <input id="address" type="text" name="address" size="24"  maxlength="128" placeholder="address/number"/>
                </div>

                <div>
                    <label>City: </label>
                    <input id="city" type="text" name="city" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Country: </label>
                    <input id="country" type="text" name="country" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>Zip Code: </label>
                    <input id="zipcode" type="text" name="zipcode" size="24"  maxlength="128"/>
                </div>

                <div>
                    <label>TRN: </label>
                    <input id="trn" type="text" name="trn"/>
                </div>

                <div>
                    <input id="signup" name="signup"  type="submit" value="Sign Up"/>
                </div>

                <br/>
            </form>
        </div>
    </body>
</html>