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是否设置了源属性，如果是，则不需要输入，否则必须有值。< / p>

JSFiddle

Answer 2

我已修改了jsfiddle example以检查文件字段值，以确保它不是空白或在编辑模式中具有以前的值。如果它是空白且未在图像中找到先前的值（src），则它会将 true 返回到必需的属性。

更改部分：

            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设置为＆＃39;＆＃39; （空字符串）或隐藏它，它将起作用;）

这里是片段;）http://jsfiddle.net/Luf0ks9b/79/

Answer 4

可以修改验证规则。您可以在初始验证中没有所需的规则和消息的情况下启动，然后在图片更改时切换到所需的规则和消息。

Keep track of the validation object and remove/replace rules directly. Works for me with v1.13.0

Answer 5

出于安全原因，浏览器会阻止在输入文件类型时设置value属性。在初始加载时，previewpic字段没有值，在您的情况下无效。

您可以添加<input type="text" id="pic-hidden" value="file_path_from_backend" />"并验证此字段。每次更改文件上传时，都会使用jquery更新隐藏字段。

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

如何在这种情况下有条件地进行Jquery验证？

5 个答案: