jQuery Validation Plugin: Показать сообщение об ошибке / изображение в следующем столбце таблицы - PullRequest
Новая
       15

jQuery Validation Plugin: Показать сообщение об ошибке / изображение в следующем столбце таблицы

1 голос
/ 06 августа 2009

Я использую плагин проверки jquery и Zend Framework. У меня есть моя форма в таблице. Я отображаю изображение как ошибку, когда текстовое поле не проверено. Изображение ошибки отображается в непосредственной близости от текстового поля в той же таблице. Но я хочу показать сообщение об ошибке / изображение в следующем тд того же тр.

Например, это перед отправкой: 

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td></td></tr></table>

Я хочу это после отправки с пустым полем: 

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td><img id='exclamation' src='images/exclamation.gif' title='This field is required.' /></td></tr></table>

Я сейчас использую эту функцию js: 

$(obj).find("input.required").each(function(){
      $(this).rules("add", {
            required: true,
            minlength: 2,

            messages: {

                    required : "<img id='exclamation' src='images/exclamation.gif' title='This field is required.' />",
                    minlength: "<img id='exclamation' src='images/exclamation.gif' title='At least 2 characters.' />"

            }
      });
});

1 Ответ

3 голосов
/ 11 августа 2009

Через некоторое время я получил ответ. Фактически я хочу отобразить изображение с выноской (содержащей ошибку) в следующем столбце (td) поля ввода, которое не проверено плагином проверки. И когда поле ввода проверяется, это изображение ошибки должно быть удалено с его выноской.

Вот мое решение. 

$("form").validate({

    errorPlacement: function(error, element) {

        //There should be an error
        if(error.html() != ''){         

            element.parent().next().html("<img id='exclamation' src='images/exclamation.gif' />").callout({
                width       : 200,
                cornerRadius    : 8,
                className   : "validationCallout",
                content     : error,
                align       : "left",
                nudgeHorizontal : -14,
                nudgeVertical   : 4,
                arrowHeight : 6
            });     
        }
    },

    success: function( label ) {
        $(obj).find(".valid").parent().next().html("");         //remove error image from next column(td) of input containing "valid" class
        $(obj).find(".valid").parent().next().closeCallout();   //remove callout on error image from next column(td) of input containing "valid" class
    }

});

Этот код может быть сложным, но сейчас он работает для меня. Здесь используется плагин выноски, который не связан с вопросом, но может помочь любому другому. Кто-нибудь может сделать это проще?

...