在这种情况下如何使Jquery验证有条件地触发？

Question

我正在使用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/

Answer 1

您可以为验证代码设置一个函数,而不仅仅是一个真或假的函数,它可以让您检查previewpicimg图像是否已设置而不验证输入.

在您的验证设置中:

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

当previewpic输入被验证,它将首先检查是否previewpicimg有一个源属性集,如果是这样,则不需要输入端,否则它必须有一个值.

的jsfiddle

Answer 2

我已经修改了你的jsfiddle示例来检查文件字段值,以确保它不是空白或在编辑模式下具有以前的值.如果它为空并且在图像中找不到先前的值(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);

Answer 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/