Input file validation

Question

I am validating form using jquery . All is working fine but not file uploading. here there is a file upload button which accept only images for that I use Jquery as follow,

$(document).ready(function(){


    $('#create_teacher').validate({
    rules: {
        teacherId: {

        required: true
      },

        teacherName: {
        minlength: 6,
        required: true
      },

        education: {
            required: true,
            minlength: 6
        },

        experience: {
            required: true,
            minlength: 6

        },

        prevdetails:{
            required: true,
            minlength: 6

        },
        email: {
        required: true,
        email: true
      },


        highlight: function(element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element
            .text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
        }
    }
  });


$('#create_teacher input[type="submit"]').click(function(e){
        e.preventDefault();
        var form = $('#create_teacher');
        var file = $('input[type="file"]', form).val();
        var exts = ['jpg','jpeg','gif','png'];
        var msg = $('.msg', form);
        msg.hide();

        // first check if file field has any value
        if ( file ) {
            // split file name at dot
            var get_ext = file.split('.');
            // reverse name to check extension
            get_ext = get_ext.reverse();

            // check file type is valid as given in 'exts' array
            if ( $.inArray ( get_ext[0].toLowerCase(), exts ) > -1 ){
                msg.show().html( '<strong style="color:#090">Allowed extension!</strong>' );
            } else {
                msg.show().html( '<strong style="color:#f00">Invalid file!</strong>' );
            }
        }else{
            msg.show().html( '<strong style="color:#f00">Select file!</strong>' );
        }
    });

}); // end document.ready

and my file picker as follow,

<input type="file"  id="photo" name="photo" />

but this is not validating . Please help me.

Can you give more hints on the location where is it going bad? When you use the debugger in your browser, where do you get unexpected results? — Patrick Hofman, Mar 10 '14 at 07:42
I want to upload image file , here If I upload text file also it is accepting . but I think click event is not working because it is not showing allowed and invalid also . . — Raghavendra, Mar 10 '14 at 07:45
Can't you rely on the submit event of the form. I have no PC available now, but try putting an alert in it and check whether it bubbles up. — Patrick Hofman, Mar 10 '14 at 07:47
the validation seems to work.. a little improved version here http://jsfiddle.net/B3FT4/ Why do you say that file is not uploading? Do you get any errors in console. What are you using on the server side? — Lucky Soni, Mar 10 '14 at 08:21

Gtopuria · Answer 1 · 2014-03-10T07:54:02.113

0

Make Sure your form looks like this :

<form action="#" method="post" " enctype="multipart/form-data" class="" onsubmit="return Checkfiles(this);">
// ...
  <input type="file" name="file" id="file">
</form>

Jquery :

  function Checkfiles(f){
      f = f.elements;
      if(/.*\.(jpg)$/.test(f['file'].value.toLowerCase()))
        return true;
      alert('Please Upload Jpg Files Only.');
       f['file'].focus();
       return false;
};

edited Mar 10 '14 at 07:54

answered Mar 10 '14 at 07:39

Gtopuria

429
2
8
25

I dont have enctype , what is it, and no need id ? – Raghavendra Mar 10 '14 at 07:42
2

@user3377978 Yes you need it , It allows files to be included in the data – Gtopuria Mar 10 '14 at 07:44
As far as I know this only influences the format in which the data is sent to the server. I don't believe it has any influence on client side. – Patrick Hofman Mar 10 '14 at 07:44
@PatrickHofman yes on client side it has no influence but in future use you will need this enctype – Gtopuria Mar 10 '14 at 07:47
@Gtopuria if I add enctype validation is not working . means submit is not working . – Raghavendra Mar 10 '14 at 07:48
@Gtopuria I tried , not working . . , somewhere I m missing . not getting . – Raghavendra Mar 10 '14 at 07:59

score 0 · Answer 2 · answered Mar 10 '14 at 15:24

jQuery Validate actually supports this directly, via additional-methods.js, using the accept rule.

What you would do is include that .js file in your page, and add a rule to your rules object that looks like this:

photo:{
    accept:'image/*'
}

Which will allow all image mimetypes.

Input file validation

2 Answers2

Linked