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?

Then maybe the validation needs to be triggered by an event? — Ahmad
– Ahmad, Commented Mar 5, 2018 at 12:36
try wrapping the validate function inside $(document).ready(). — Ahmad
– Ahmad, Commented Mar 5, 2018 at 12:37

Bits Please · Accepted Answer · 2018-03-05 12:48:11Z

2

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() == '')

edited Mar 5, 2018 at 12:48

Bits Please

9071 gold badge7 silver badges23 bronze badges

answered Mar 5, 2018 at 12:41

Umar Khan

1328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Renzo Calla · Accepted Answer · 2018-03-05 12:40:54Z

1

<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);
     });
  });

answered Mar 5, 2018 at 12:40

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

Collectives™ on Stack Overflow

Conditional Validation - Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related