Monday, November 30, 2009

[jQuery] Validate plugin: insertAfter problem/question

I am using the jQuery Validation plugin in conjuction with the
jqTransform plugin to style the form.

I need to insert the error message after the "rowElem" div. I can do
that, but the problem is that for each input field I get all the error
messages form the other fields.
Example: if I got 3 required fields, when I hit "submit" I got 3 times
"this field is required" after each "rowElem" which include the submit
button.

Thi is the HTML output before the submission (with the output from the
jqTransform plugin):

<div class="rowElem">
<div class="jqTransformInputWrapper">
<div class="jqTransformInputInner">
<div><input type="text" name="dname" class="default-value
required jqtranformdone jqTransformInput" id="dname" style="color: rgb
(204, 204, 204);"/>
</div>
</div>
</div>
</div>

This is the JS:

<script type="text/javascript">
// VALIDATION + AJAX FORM
$(document).ready(function(){
$('#contactform').validate({

errorPlacement: function(error, element) {
error.insertAfter('.rowElem');
},

submitHandler: function(form) {

$(form).ajaxSubmit({
success: function() {
$('#contactform').hide();
$('.contact-col h4').hide();
$('#contact-col-form').append("<p
class='thanks'>Thanks! Your request has been sent.</p>")
}
});
}

});
});
</script>

Any help to solve this "multipling" effect is appreciated.
Thanks.

No comments: