javascript - Input file validation -

i validating form using jquery . working fine not file uploading. here there file upload button accept images use jquery 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 value         if ( file ) {             // split file name @ dot             var get_ext = file.split('.');             // reverse name check extension             get_ext = get_ext.reverse();              // check file type valid 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 file picker follow,

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

but not validating . please me.

make sure form looks :

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