Jquery ErrorPlacement конфликтует с позицией: абсолют - PullRequest
Новая
       37

Jquery ErrorPlacement конфликтует с позицией: абсолют

0 голосов
/ 14 марта 2012

У меня проблема с Ajax errorPlacement для моего плагина проверки ( См. Эту скрипту ). ErrorPlacement в сочетании с позиция: абсолютная заставляет мой ответ проверки ajax всплыть в неправильном месте.

Если пользователь еще не ввел какую-либо информацию, ошибкасообщения всплывают в правильном положении (плавающие справа от поля ввода красным шрифтом).Однако, если пользователь ввел информацию, а затем удаляет ее, предупреждение ajax («это поле обязательно») появляется в неправильном месте в поле ниже, где это должно быть.Чтобы просмотреть проблему, введите все поля правильно, затем удалите свое имя.В поле электронной почты появляется сообщение «это поле обязательно для заполнения», но оно относится к полю имени.

JS, управляющий проверкой: 

$(document).ready(function() {
        errorPlacement: function(error, element) {
              error.insertAfter( element).position({
                  my:'right top',
                  at:'right top',
                  of:element          
              });
                  error.fadeOut(3000);
         }  
    }); 
});

CSS, что этопроблема заключается в следующем: 

label.error { position:absolute;}

Мне нужно включить этот CSS, чтобы я мог всплывать ошибки над полями ввода.См. Fiddle , чтобы увидеть проблему.Спасибо!

Ответы [ 2 ]

1 голос
/ 14 марта 2012

Ник, вы упустили момент (я ответил на ваш предыдущий вопрос об этом). Пользовательский интерфейс jQuery имеет утилиту Position . Это то, что я использовал, чтобы расположить метки там, где вы хотите. Таким образом, единственная «ошибка» в вашем jsFiddle - это то, что вы не установили флажок «jQuery UI» в разделе ресурсов. Я сделал версию вашего jsfiddle , где я удалил вещь right: 90px и установил флажок jQuery UI. Вот и все.

Если вы хотите изменить расположение ярлыков относительно элемента с ошибкой, проверьте параметр offset в утилите Position (ссылка выше).

1 голос
/ 14 марта 2012

Просто измените ваш CSS следующим образом: 

form p {
    position: relative;   /* This ensures error label is positioned within the p tag */
}
label.error {  
    top: 0; /* This ensures that it lines up with the top of the input */
    right:90px; 
    color: red; 
    position:absolute;
}

Даже проверено в IE, чтобы быть уверенным ...

...