jQuery Validation for Input Type File

Question

I am using jQuery validation on my form with couple of textboxes, drop down lists and a file input. I've also added additional_methods.js for extension method. It works perfectly, except for file input. It shows default error message for required not custom message, and extension part is not working neither.

Html:

<input type="file" id="Logo" class="form-input-styled" required>

jQuery:

$('.form-validate').validate({
    ignore: 'input[type=hidden], .select2-search__field',
    errorClass: 'validation-invalid-label',
    successClass: 'validation-valid-label',
    validClass: 'validation-valid-label',
    highlight: function (element, errorClass) {
        $(element).removeClass(errorClass);
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass(errorClass);
    },
    success: function (label) {
        label.addClass('validation-valid-label').text('Başarılı.');
    },
    errorPlacement: function (error, element) {
        if (element.parents().hasClass('form-check')) {
            error.appendTo(element.parents('.form-check').parent());
        }
        else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
            error.appendTo(element.parent());
        }
        else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    },
    rules: {
        Logo: {
            required: true,
            extension: "png"
        }
    },
    messages: {
        Logo: {
            required: "Please select a business logo!",
            extension: "Please select a valid logo!"
        }
    }
});

A name attribute is mandatory for the field being validated. It’s also what you put inside the rules object; not Id. name=“Logo”. This is spelled out in the documentation. — Sparky, Commented Jul 20, 2018 at 13:44
I am using validator first time, and i missed this. It is possible, right? And, thanks for the downvote. It will remind me to dig deeper before ask any questions here. — YSFKBDY, Commented Jul 20, 2018 at 13:47

YSFKBDY · Accepted Answer · 2018-07-20 12:34:55Z

0

Problem solved! When I add name property to the input, it works perfectly as i wanted. Custom error message is working now.

<input type="file" id="Logo" name="Logo" class="form-input-styled" required>

answered Jul 20, 2018 at 12:34

YSFKBDY

8941 gold badge15 silver badges47 bronze badges

Add a comment |

Collectives™ on Stack Overflow

jQuery Validation for Input Type File

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related