Поместите сообщения об ошибках Jquery в одном поле (или div) - PullRequest
Новая
       27

Поместите сообщения об ошибках Jquery в одном поле (или div)

1 голос
/ 21 января 2011

У меня есть проверка пользовательской формы jquery, как показано ниже; 

jQuery(document).ready(function($) {

    var container = $('div.container');
    var validator = $("#form2").validate({
        errorContainer: container,
        errorLabelContainer: $(container),
        wrapper: 'li',
        meta: "validate"
    });
    $.validator.addMethod(
    "mydate",
    function(value, element) {
        return value.match(/^\d\d?\-\d\d?\-\d\d\d\d$/);
    },
    "Please enter a date in the format dd-mm-yyyy"
    );

});

Я использую;

  1. jquery-1.4.3.min.js, 2. jquery.validate.js и 3. jquery.metadata.js

Это подтверждает мою форму <form id="form2" method="post" action=""> и мое поле формы 

<input id="datepick" name="LDate" class=" {validate:{required:true,mydate : true }}"  style="width: 85px">

Пустые сообщения об ошибках (обязательные сообщения поля формы)умно отображаются в отдельном контейнере, как показано ниже;

<div class="container2">
        <label for="datepick" class="error">Please enter LDate</label>
</div>

, который изначально скрыт от пользователя в стиле 

div.container2 {
  display: none
}

и будет отображаться при ошибке.

Сценарий проверяет формат данных, введенных в поле формы, с помощью jquery add methord.Но мое собственное сообщение об ошибке "Please enter a date in the format dd-mm-yyyy" отображается рядом с полем формы в виде списка.Я хочу переместить это сообщение об ошибке выше <div class="container2">.Как я могу сделать это возможным?

Заранее спасибо ..:)

бластеральфред

Ответы [ 2 ]

0 голосов
/ 21 января 2011

Документация для состояний "addMethod" для необязательного аргумента "message":

сообщение (необязательно) Строка, Функция
Сообщение по умолчанию для отображения Этот метод. Может быть функция создана по jQuery.validator.format (значение). Когда не определено, уже существует сообщение используется (удобно для локализация), в противном случае специфичные для поля сообщения должны быть определены.

Попробуйте изменить строку: 

"Please enter a date in the format dd-mm-yyyy"

до: 

function(){
    $('.container2).empty().text("Please enter a date in the format dd-mm-yyyy");
    return '';
}

Я подозреваю, что это сработает, но я не уверен на 100%.

0 голосов
/ 21 января 2011

Перво-наперво, убедитесь, что вы используете firebug, это css инспектор имеет важное значение для такого рода вещей. Вы можете редактировать css live на странице, настраивая позиции и добавляя новые свойства, пока вы не получите правильный css, а затем скопируйте и вставьте в свой код .... Также убедитесь, что у вас есть консоль firebug, включенная и видимая.

Используйте комбинацию jquery и css:

вариант 1: отредактируйте используемый плагин так, чтобы container2 находился внутри container1. Установите для container1 значение position:relative;, а для container2 - значение position:absolute; и top:-60px; (затем можно настроить верхнюю и левую части)

вариант 2: Используйте jquery, чтобы получить позицию элемента container1 div, console.log($('container1').offset());. Затем вы можете использовать jquery, чтобы установить положение элемента container2 над контейнером один, вычитая, скажем, 60 из смещения, а затем используя $('container2').css({position: 'absolute', top: .....});

надеюсь, это поможет!

...