<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .full{height:100%; width:100%; margin:0px;padding:0px; border:3px;} #scrollable-container {height:100%; width:100%; overflow: auto; position: relative; } #relative {min-height: 0; position: relative; width:100%;} label { display: inline-block;} label.error { width: auto; margin-left: 10px; color: red; font-style: italic; } label.ok { width: auto; margin-left: 10px; color: green; font-style: italic; } input.pole { width: 250px; border: 1px solid black; } input.error { border: 1px solid red; } </style> <script type='text/javascript' src='jquery-1.4.min.js'></script> <script type='text/javascript' src='jquery.validate.min.js'></script> <script type="text/javascript"> $(document).ready(function() { $.validator.setDefaults({ // Общие опции для всех методов validate() submitHandler: function(form) { // Здесь отправляем форму обычным способом или через AJAX alert("Форма успешно проверена"); } }); $("#frm2").validate({ // Проверка данных формы 2 success: function(elem) { elem.addClass("ok").html("Правильно!"); }, rules: { // Задаем правила заполнения полей pole1: { required: true, // Обязательное поле rangelength: [2, 16] // От 2 до 16 символов }, pole2: "required" // Обязательное поле }, messages: { // Задаем сообщения, выводимые при нарушении правил pole1: { required: "Поле не заполнено", rangelength: "Допустимо от 2-х до 16-ти символов" }, pole2: "Поле не заполнено" } }); }); </script> </head> <body> <form action="" id="frm2"> <table class='full' > <tr align='left' valign='top'> <td> <div id='scrollable-container'> <div id='relative'> <div style="position:absolute; top:100px; left:100px;"> Поле 1*: <input type="text" name="pole1" ><br> </div> <div style="position:absolute; top:1000px; left:1010px;"> Поле 2*: <input type="text" name="pole2" > </div> </div></div> </td> </tr> <tr align='right' valign='top' height='10%'> <td> <input type="submit" value="Отправить"> </td> </tr> </table> </form> </body> </html> А проблема в том, чтоб при некорректном pole2 сообщение показывалось как в pole1(в одной строке с input), а сейчас это не так. Это связано с тем,что содержимое скролла не расширяется при добавлении сообщения(обратите внимание что и название Поле 2* над input). Как решить?
