I'm having this very simple form to enter user name and choose a file to upload. User name is required but file is not. It's styled and has a function to check file type and size before submitting the form. If you choose a wrong file the function will work and the submit button will be disabled. If you don't choose a file the user name validation won't work. If you click in the text input then blur it will go red but the form will submit. JSFIDDLE

HTML

<form method="post" class="contact" onsubmit="return validate();" enctype="multipart/form-data">
        <table cellspacing="30">
            <tr>
                <td>
                    <label id="userlabel">user name</label>
                    <input type="text" id="user" name="username" onblur="checkUser()"></td>                  
            </tr>

            <tr>
                <td>
                    <div id="FileUpload">
                        <input type="file" size="4" id="BrowserHidden" 
onchange="getElementById('FileField').value = getElementById('BrowserHidden').value;" name="pic" />
                        <div id="BrowserVisible"><input type="text" id="FileField" /></div>
                    </div>
                </td>
                </tr>
                <tr>
                <td><input type="submit" name="send" id="save" value="send" /></td>
            </tr>
        </table>
    </form>

JS

function checkUser(){
    var userlen = $("#user").val().length;
    if(userlen<4){
        $("#userlabel").css("color","rgb(224, 19, 19)");
        return false;
    }
    else{
        $("#userlabel").css("color","#000");
        return true;
    }
}

$("#BrowserHidden").change(function (e) {
 var file = this.files[0];
 var name = file.name;
 var extension = name.substr((name.lastIndexOf('.') + 1));
 var str = 'doc,docx,pdf';
 if (str.indexOf(extension) > -1) {
 console.log('y');
 size = file.size;
 console.log(size);
 if (size > 10000000) {
 alert('file size is larger than 10 MB');
 $("#save").attr("disabled", "disabled");
 return false;
 }
 else {
 $("#save").removeAttr("disabled");
 return true;
 }
 }
 else {
 alert('file type is not allowed');
 $("#save").attr("disabled", "disabled");
 return false;
 }
 });

 function validate(){
    $.each($('form :input'),function(){
        $(this).blur().change();
    });
    if(!checkUser() ){
        return false;
    }
    else{
        return true;
    }
}