jQuery File Type Validation Based on Radio Buttons

Question

I'm trying to validate file type base on radio button selection. If the user click on "Display Ad". He/She can only upload image files and if the user selects "Video", he/she can only upload video files. Furthermore, they can only upload file on certain size only which I might be able to do it later. The main problem for me now is I can't validate image file and video file. Here's my jsfiddle: http://jsfiddle.net/MZu3g/

Below is my sample code for the javascript.

$('.form_validation_reg3').validate({
    onkeyup: false,
    errorClass: 'error',
    validClass: 'valid',
    highlight: function (element) {
        $(element).closest('div').addClass("f_error");
    },
    unhighlight: function (element) {
        $(element).closest('div').removeClass("f_error");
    },
    errorPlacement: function (error, element) {
        $(element).closest('div').append(error);
    },
    rules: {
        'gender[]': {
            required: '#adtarget_check:checked',
            minlength: 1
        },
            'target_age[]': {
            required: '#adtarget_check:checked',
            minlength: 1
        },
            'target_time[]': {
            required: '#adtarget_check:checked',
            minlength: 1
        },
            'target_device[]': {
            required: '#adtarget_check:checked',
            minlength: 1
        },
            'target_location[]': {
            required: '#adtarget_check:checked',
            minlength: 1
        },
            'target_network[]': {
            required: '#adtarget_check:checked',
            minlength: 1
        },
        notebook: {
            required: true,
            minlength: 1,
            accept: "jpg|jpeg|png|ico|bmp"
        },
        mobile: {
            required: false,
            minlength: 1,
            accept: "jpg|jpeg|png|ico|bmp"
        },
    },
    invalidHandler: function (form, validator) {
        $.sticky("There are some errors or no Ads image were selected. Please correct them and submit again.", {
            autoclose: 8000,
            position: "top-right",
            type: "st-error"
        });
    }
})

score 1 · Answer 1 · answered Jan 24 '14 at 16:32

1

Since your fiddle did not include the jquery.validate.js script, I'm not sure if that was the problem, or if the problem is that you forgot to include the additional-methods.js, which is where the accept rule lives. If you don't have that, your accept rule will never work, and will throw errors (which you should have included in your question!).

So to be clear, this is what your scripts should look like:

  <script type='text/javascript' src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>    
  <script type='text/javascript' src="http://jquery.bassistance.de/validate/additional-methods.js"></script>

See a working example here: http://jsfiddle.net/ryleyb/MZu3g/1/

answered Jan 24 '14 at 16:32

Ryley

21,046
2
67
81

The accept rule works, I have those jquery included.. The only problem I have now is to have separate rule. When user chooses video, he/she only able to upload video files and vice versa if choose "display ad" only able to upload image files. – nodeffect Jan 27 '14 at 02:59
Check out [this answer](http://stackoverflow.com/questions/4128657/jquery-validation-changing-rules-dynamically/4129124#4129124). What you want to do is use the `change` function of the radio button to swap out all the rules for the upload field. – Ryley Jan 27 '14 at 06:35
Ryley, I came across this also, and seems a bit complicated to me. But anyway, I found another solution to my problem. – nodeffect Jan 27 '14 at 07:01
Sure. Your solution is fundamentally the same as what I proposed, but good enough, glad you figured it out! – Ryley Jan 27 '14 at 07:15

score 1 · Accepted Answer · answered Jan 27 '14 at 07:00

Found the solution... by adding these..

var radio_value = null;
$("input[name='tabnote_radio']").change(function() {
    radio_value = this.value;
    if ( radio_value == "image") {
        $('#notebook').rules('add', {
            extension: "jpg|jpeg|png|gif"
        });
    } else if( radio_value == "video") {
        $('#notebook').rules('add', {
            extension: "flv|mov|mp4|wmv|ogv"
        });
    };
});

This can be useful too: http://snippets.aktagon.com/snippets/490-how-to-add-and-remove-validation-rules-jquery-validate-plugin-

for image, you can add filesize:1048576... But for video file, it give me error... I'm lookin for answers too... — nodeffect, Jun 03 '14 at 04:35

jQuery File Type Validation Based on Radio Buttons

2 Answers2