How to Make Jquery Validation fire conditionally in this case?

Question

I am using jquery Validator Framework for validating form which consists of input type text and file elements .

Initially when the page is loaded in edit mode (the Form will have all values filled in)

So at that time when clicked on Submit button , the Jquery validation for the input type file should be skipped (as it has already a value) and it must be fired only incase user removes the picture and tries to submit the form .

This is my 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

You can set a function for your validation code, rather than just a straight true or false, that lets you check to see if your previewpicimg image is set and not validate the input.

In your validation setup:

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

When the previewpic input is validated, it will first check if the previewpicimg has a source attribute set and, if so, the input is not required, otherwise it has to have a value.

JSFiddle

Answer 2

I have modified in your jsfiddle example to check the file field value to ensure it is not blank or have previous value in edit mode. If it is blank and it doesn't find previous value (src) in the image, then it returns true to required property.

Changed portion:

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

Try commenting following lines to see the validation:

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

Answer 3

We check if image is there in DOM, is :visible and has src attribute set.
Because in that case user doesn't need to select image again ;)

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

In your removepic handler, remove the image or set src to '' (empty string) or hide it, and it will work a treat ;)

Here's the snippet ;) http://jsfiddle.net/Luf0ks9b/79/

Answer 4

Validation rules can be modified. You can start without the required rules and messages in the initial validation then switch to the required rules and messages if and when the pic changes.

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

Answer 5

Browsers block against setting the value attribute on input of file type for security reasons. On initial load, the previewpic field has no value and is not valid in your case.

You can add an <input type="text" id="pic-hidden" value="file_path_from_backend" />" and validate this field instead. Every time you change the file upload you update the hidden field too with jquery.

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