Как сделать Jquery Validation условно в этом случае?

Я использую jquery Validator Framework для проверки формы, состоящей из типов ввода текст и файла.

Изначально, когда страница загружается в режиме редактировать (форма заполняет все значения)

Итак, в то время, когда нажата кнопка Отправить, проверка Jquery для файла типа ввода должна быть пропущена (поскольку она уже имеет значение) и он должен быть запущен только для того, чтобы пользователь удалил изображение и попытался отправить форму.

Это мой jscode

jQuery(document).ready(function()
{
        $("#description").text('Iniital Value');
        var defimg = 'https://www.gstatic.com/webp/gallery3/1.png';
        $("#previewpicimg").attr('src', defimg);
        $('#pacinsertform').validate(
        {
                rules:
                {
                        previewpic:
                        {
                                required: true
                        },
                        description:
                        {
                                required: true
                        }
                },
                messages:
                {
                        previewpic:
                        {
                                required: "Upload Image required",
                        },
                        description:
                        {
                                required: "description  required",
                        }
                },
                highlight: function(element)
                {
                        $(element).parent().addClass('error')
                },
                unhighlight: function(element)
                {
                        $(element).parent().removeClass('error')
                },
                submitHandler: function(event, validator)
                {
                        if ($("#pacinsertform").valid())
                        {
                                ajaxInsertPac();
                                return false;
                        }
                }
        });
});
$("#previewpic").change(function()
{
        $("#previewpic").blur().focus();
});

function ajaxInsertPac()
{
        alert('ajax call heer');
        return false;
}
$(document).on("click", ".removepic", function(event)
{
        $("#previewpic").attr('name', 'previewpic');
});
$(document).on("click", ".resetform", function(event)
{
        $("#description").val('');
        $(".removepic").trigger("click");
        $("#pacinsertform").validate().resetForm();
});

http://jsfiddle.net/Luf0ks9b/61/

Ответы

Ответ 1

Вы можете установить функцию для своего кода проверки, а не просто прямое или ложное, что позволяет проверить, установлено ли ваше изображение previewpicimg и не проверять ввод.

В вашей настройке проверки:

previewpic: {
    required: function(element) {
        if ($("#previewpicimg").attr('src') !== '') {
            return false;
        } else {
            return true;
        }
    }
}

Когда вход previewpic проверен, он сначала проверяет, установлен ли атрибут источника previewpicimg, и если это так, вход не требуется, в противном случае он должен иметь значение.

JSFiddle

Ответ 2

Я изменил в пример jsfiddle, чтобы проверить значение поля файла, чтобы убедиться, что он не пуст или имеет предыдущее значение в edit. Если он пуст и он не находит предыдущее значение (src) в изображении, он возвращает true в свойство required.

Измененная часть:

            rules:
            {
                    previewpic:
                    {
                            required: function(){
                                return ($("#previewpic").val()=="" && $("#previewpicimg").attr('src')=="");
                            }
                    },
                    description:

Попробуйте прокомментировать следующие строки, чтобы увидеть подтверждение:

    var defimg = 'https://www.gstatic.com/webp/gallery3/1.png';
    $("#previewpicimg").attr('src', defimg);

Ответ 3

Мы проверяем, есть ли изображение в DOM, есть :visible и имеет атрибут src.
Поскольку в этом случае пользователю не нужно снова выбирать изображение;)

required: function () {
    var $img = $( "#previewpicimg" );
    if ( $img.length && $img.is( ':visible' ) && $img.attr( 'src' ) ) {
        return false;
    } else {
        return true;
    }
}

В обработчике removepic удалите изображение или установите src в '' (пустую строку) или скройте его, и он будет работать с удовольствием;)

Здесь фрагмент;) http://jsfiddle.net/Luf0ks9b/79/

Ответ 4

Правила валидации могут быть изменены. Вы можете начать без необходимых правил и сообщений в начальной проверке, а затем переключиться на требуемые правила и сообщения, если и когда изменяется pic.

Отслеживать объект проверки и напрямую удалять/заменять правила. Работает для меня с v1.13.0

Ответ 5

Браузеры блокируют установку атрибута значения при вводе типа файла по соображениям безопасности. При начальной загрузке поле previewpic не имеет значения и недействительно в вашем случае.

Вы можете добавить <input type="text" id="pic-hidden" value="file_path_from_backend" />" и проверить это поле. Каждый раз, когда вы меняете загрузку файла, вы также обновляете скрытое поле с помощью jquery.

$("#previewpic").change(function()
{
    $("#previewpic").blur().focus();
    $("#pic-hidden").val( $(this).val() );
});