jquery validation div

Question

I am using jquery.validate.js plugin for a dialog validation. My problem is that I would like on submit only the first problematic field to get a class and the field error to be displayed as a tip in a fading out div next to the field. (write now the plug in adds labels on every field)

I hope I was clear enough!

Thank you in advance!!!

(if you need anything more please ask for it)

EDIT

The code for it

$("#wdw1003_useraddform").validate({
    rules : {
        wdw1003_username : {
            required : true
        },
        wdw1003_password : {
            required : true
        },
        wdw1003_fullname : {
            required : true
        },
        wdw1003_email : {
            required : true,
            email : true
        }
    },
    messages : {
        wdw1003_username : {
            required : "Field User Name is required"
        },
        wdw1003_password : {
            required : "Password is required"
        },
        wdw1003_fullname : {
            required : "Field Full Name is required"
        },
        wdw1003_email : {
            required : "Field E-mail is required",
            email : "Is not a valid e-mail"
        }
    }
});

EDIT after ankur20us comment

The form is generated with this lines

$form = new Form('useraddform', '#', $id."_");
$form -> setRequired('<img src="images/required.png" alt="Required" align="absmiddle" />', '<img src="images/required.png" alt="Required" align="absmiddle" />' . $trans -> translate('denotes required field'));
$form -> addElement('text', 'username', $trans -> translate('User Name'));
$form -> addElement('password', 'password', $trans -> translate('Password'));
$form -> addElement('text', 'fullname', $trans -> translate('Full Name'));
$form -> addElement('text', 'email', $trans -> translate('E-mail'));
$form -> addElement('select', 'perms', $trans -> translate('Permissions'), array('options' => $perms, 'value' => 'level1'));
$form -> addElement('select', 'status', $trans -> translate('Status'), array('options' => $status, 'size' => "1"));
$form -> addElement('textarea', 'comments', $trans -> translate('Comments'));
$form -> addElement('select', 'lang', $trans -> translate('Language'), array('options' => $langs, 'size' => "1"));
$form -> addElement('submit', 'submit', $trans -> translate('Create User'), array('style' => "clear:both; float:right; margin-right: 8%;"));

The javascript above comes out of these lines

     $form -> addRule('username', 'required', $trans -> translate('Field User Name is required'));
$form -> addRule('password', 'required', $trans -> translate('Password is required'));
$form -> addRule('fullname', 'required', $trans -> translate('Field Full Name is required'));
$form -> addRule('email', 'required', $trans -> translate('Field E-mail is required'));
$form -> addRule('email', 'email', $trans -> translate('Is not a valid e-mail'));

So I can not change much!!!

Answer 1

Here is the solution I found. I created a hidden div into my page like this

<div id="validationMessageBox" class="ui-corner-all" style="display: none;">
    <div id="validationMessageBoxSymbol" class="ui-icon ui-icon-alert"></div>
    <div id="validationMessageBoxMessage"></div>
</div>

Then I used showErrors:function(errors) of the jquery.validate API to display the hidden div updating it's message and positioning it next to the first missing element. and finaly a fadeout.

The final code is below.

$("#wdw1003_useraddform").validate({
    rules : {
        wdw1003_username : {
            required : true
        },
        wdw1003_password : {
            required : true
        },
        wdw1003_fullname : {
            required : true
        },
        wdw1003_email : {
            required : true,
            email : true
        }
    },
    messages : {
        wdw1003_username : {
            required : "Field User Name is required"
        },
        wdw1003_password : {
            required : "Password is required"
        },
        wdw1003_fullname : {
            required : "Field Full Name is required"
        },
        wdw1003_email : {
            required : "Field E-mail is required",
            email : "Is not a valid e-mail"
        }
    },
    showErrors : function(errors) {
        var error = this.errorList[0];
        if(undefined != error) {
            var $element = $(error.element);
            var message = error.message;
            $element.addClass("ui-state-error");
            $("#validationMessageBox").addClass("ui-state-error").css({
                left : $element.offset().left + $element.width() + 15,
                top : ($element.offset().top)
            });
            $("#validationMessageBoxMessage").html(message);
            $("#validationMessageBox").show("fast");
            $element.removeClass("ui-state-error", 2000);
            $("#validationMessageBox").fadeOut(2000);
        }
    },
    onclick : false,
    onkeyup : false,
    onfocusout : false
});

Answer 2

Demo This is what you required this plugin supports that tip kind of thing and for that to work just do

<form id='validateMe'>
<input value=""  class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder" />
<input type='submit' value='Validate'/>
</form>

Jquery Part of the coding

jQuery("#validateMe").validationEngine();