我有一个非常简单的表单来输入用户名并选择要上传的文件。用户名是必需的，但文件不是。它具有样式，并具有在提交表单前检查文件类型和大小的功能。如果您选择了错误的文件，该功能将起作用，并且提交按钮将被禁用。如果不选择文件，则用户名验证将不起作用。如果你点击文本输入，然后模糊它将变为红色，但表单将提交。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;
    }
}