jQuery validation error messages disturbing my form. (jquery.validate.js)

Question

Whenever jquery validation error messages appears. It occupies some space and push other fields downwords. I want error messages to be adjust in available space and should not disturb other fields or any other element. following is a jquery validation code that Im using.

$(document).ready(function(){ 

jQuery("#frmQuickAdd").validate({
        errorElement:'div',
        rules: {
            t_style: {
                required: true
            }
        },

        messages: {
            t_style: {
                    required: "Please select therapy style"
            }
       } 
    });

});

I tried div,label,span in errorElement:'', still having same problem and error div by default taking class 'error'. Any Idea what CSS I should write ?

Can you please create example on www.jsfiddle.com and reproduce your problem? — Miljan Puzović
– Miljan Puzović, Commented Apr 20, 2013 at 11:35
indianhans.org/login/userlogin You can check over this page see how error messages moving fields downwards. — Mahendra
– Mahendra, Commented Apr 20, 2013 at 11:38

Miljan Puzović · Accepted Answer · 2013-04-20 12:00:14Z

1

Basic solution is to make those error messages absolute positioned.

In ul.ulsignup li add margin-bottom: 0; and padding-bottom: 10px;
In ul.ulsignup li .text add position: relative;
In div.error (or div div .error) add position: absolute; bottom: -15px; font-size: 10px;

edited Apr 20, 2013 at 12:00

answered Apr 20, 2013 at 11:54

Miljan Puzović

5,8201 gold badge26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery validation error messages disturbing my form. (jquery.validate.js)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related