Validation plugin - displaying messages

Question

jquery version: 1.9.0
validation plugin: http://docs.jquery.com/Plugins/Validation

I want to achieve the effect of making field input red and displaying error message inside of it - how can I do this? At this moment, I can't get errors being displayed anywhere. Validation works, everything seems to be ok, my field have id and name of the same value...nothing happened though. This is my code:

$(document).ready(function() {
        $("#form").validate({
            rules: {
                username: {
                    remote: {
                        url: '<?php echo URL::base(TRUE, TRUE); ?>form/validate/rules',
                        type: "POST",
                        data: {
                            <?php // some data ?>
                        }
                    }
                },
            },
            messages {
                username {
                        remote: "Fdsfdsfsdfdfs"
                }
            }
        });
});

This is my HTML:

<form action="..." method="post" id="form" accept-charset="utf-8">  <div id="input-text" class="input">
    <label for="username">fdsfsd</label>
    <input 

                type="text"
        name="username"
        id="username"

        value=""
        style="" />
</div>
<div id="input-text" class="input">
    <label for="aaa"></label>
    <input 

                type="text"
        name="aaa"
        id="aaa"

        value=""
        style="" />
</div>
<div id="input-submit" class="input">
    <input 
        type="submit"
        name="submit"
        id=""
                value="submit"
        style="" />
</div>

<script type="text/javascript">
// script from above
</script>
</form><div id="form-errors"></div>

I tried this:

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().find('div.form-errors'));
    }
});

But doesn't work either, some "method not found" error appears in the firebug...I can't find any solution to this problem, could you help me? I think I described my problem well enough.

Answer 1

If you are ever having problems with this plug-in, you can turn on debugging to get some help:

$("#form").validate({
   debug: true,
   ...rest of the options
});

That may be of some help diagnosing issues generally.

You said you want the "field input red and displaying error message inside of it". If the field is in an error state, the validation plug-in should give the field a CSS class of "error" (you can set the "errorClass" option to change that to another class if you like). So, you can style input.error to have a red border or whatever you like.

However, putting the error message inside the form field is going to be more tricky. First of all, it can't be done if you form field is a check box, radio button, or select menu. I could be done for text entry fields. However, I'd advise against it. If, for example, you have a required field of "name", as soon as the form is submitted, if the name field is empty, it will be set to error, but given then immediately given value of "This field is required" and suddenly it's no longer in an error state. The CSS highlighting will go away, and the user may not notice that the name field is set wrong.

It seems to me that you are on the right track exploring the errorPlacement function, though you may also wish to investigate invalidHandler. "errorPlacement" deals with the errors for a single field. "invalidHandler" would more typically be used for showing a general error state on the form.

If you don't set anything for errorPlacement, the validate plug-in appends a label with the class of error after the form field that is an error state. So, I generally find that you only need to set some CSS styling for "label.error". For example:

<style>
    label.error {
        border: 1px solid red;
        color: red;
    }
</style>

Hope that helps!