【问题标题】：issue with form validation including input file表单验证问题，包括输入文件
【发布时间】：2016-04-12 21:38:46
【问题描述】：

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

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

【问题讨论】：

您正确的表单验证（提交）方案是什么？
如果用户名长度小于 4 个字符，则不应提交表单。我在实际应用程序中有其他表单元素，并在检查用户名时检查它们。

标签： javascript jquery forms validation

【解决方案1】：

这就是你可以使它工作的方法：

将提交按钮更改为普通按钮并为其添加onclick 属性
从您的form 标签中删除onsubmit 属性
如果 checkUser() 返回 true，则将您的 validate() 函数更改为提交表单

就是这样！

Fiddle

希望对你有用！

【讨论】：