Conditional Validation - Jquery

Question

I've well researched and used this, but I don't know it is still getting error. I need to check if existing image exists then file attribute should skip validation and viceversa.

HTML COde:

<input  type="file" name="image" id="image">    
<input type="hidden" name="old_image" value="">

JQuery Validation Code:

$("#add_reference").validate({
        rules: {
            link: {   
                required: true,
            },
            image:{
                //required: true,
                required: function(element) {
                    if ($("#old_image").val() == '') 
                    {
                        return true;
                    } 
                    else 
                    {
                        return false;
                    }
                },
                accept:"jpg,png,jpeg,gif"
            },
        },       
        messages: {

            link: {
                required: "Please enter link title",
            },
            image:{
                required: "Please choose image",
                accept: "Please choose valid image files",
            },
        },
        errorPlacement: function (error, element) {
            var attr_name = element.attr('name');
            error.insertAfter(element);            
        }
    });

Can Anyone tell me where I am going wrong?

Answer 1

There is no id in your input tag,instead you should add id attribute.

<input type="hidden" name="old_image" id="old_image" value="">

and you are calling it by id

if ($("#old_image").val() == '')

Answer 2

<input  type="file" name="image" id="image">    
<input type="hidden" id="old_image" name="old_image" value="">

Your validation won't fire because it is always passing the test, you are testing if #old_image is empty and as you can see it is always empty, are you triggering an event after you upload your file???

You can do it with this event..

$(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       $("#old_image").val(fileName);
     });
  });